Not able to center html elements

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

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

#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

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

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.

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

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
#prod-video {
    margin: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

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