Not able to center html elements

HTML-CSS
1

Hi everyone,

I am not able to center a video and a form elements in my code. I tried a lot of things but can’t seem to find the solution.

https://codepen.io/HacNass/full/ZgLqLV

2

hi do you use flex or grid ?
and whats the positioning ?
padding ?

3 
#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

use this

4

I’m thinking of a “wrapper” div centered, and the video is inside the wrapper centered div, so it must be centered.

5

Hi @HaceneNasseur, you can use flexbox to center the elements inside your div.

I have tried it on your pen and it worked fine as shown in the picture. You can do the same with the form.

image
image1170×767 133 KB

Please revisit the Flexbox section on the curriculum to digest it better.

By the way, my Technical Documentation Page shows how use Flexbox, give it a try and check the guide and CSS code.

2 Likes
6

You can just use text-align: center; on #contact-form and #prod-video. It will obviously center all text and it isn’t really the best way to center sections, but it might be “good enough” depending on the page.

However, I would probably suggest doing it using some other technique, like margin auto or using flexbox/grid, etc.

Different centering techniques
https://codepen.io/lasjorg/pen/aPbLge

2 Likes
7 
#prod-video {
    margin: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

just update your #prod-video selector css with this one.

8

Thanks for your help @leovago. Yeah maybe I should check flexbox section again even i’ve always had difficulties with CSS :slight_smile: