CODEWITHSUNDEEP
htmlcss
Coding Gal
Coding Gal

Reputation: 145

How do I get my divs to align at the center if margin:auto doesn't work?

I've tried to find the answer for days. The divs bundle up on the left for some reason and don't listen to reason. What mistake am I making?

.vlak{
width:220px;
height: 300px;
background-color:#FFF;
float:left;
margin-left:auto;
margin-right:auto;
position:relative;
margin-top: -50px;
}

.vlak img{
width:200px;
height: 125px;
margin-left:auto;
margin-right:auto;
margin-top: 10px;

}

#vlakken{
width: 998px;
height:275px;
background-color: f2f2f2;   
margin-left:auto;
margin-right:auto;
position:relative;
z-index: 100;
}

https://jsfiddle.net/vxxyo9jb/

I'm trying to align the .vlak at the center

Upvotes: 1

Views: 37

Answers (2)

Sahil Bali
Sahil Bali

Reputation: 26

Thats simple, pls follow 2 steps

  1. The div which containing all your Pictures, provide that div with some "height" and "Overflow: hidden"in CSS.

  2. Now simply use "float: left" and apply "padding" to your picture div in CSS.

Hope this will help you out.

Upvotes: 0

Bogdan Kuštan
Bogdan Kuštan

Reputation: 5577

You are floating elements to the left:

.vlak{
...
float:left;
...
}

margin: auto won't work on floated elements. It's 2015 You should be using flexbox to center items :), get rid of float: left property and add:

#vlakken{
    width: 998px;
    height:275px;
    background-color: f2f2f2;   
    margin-left:auto;
    margin-right:auto;
    position:relative;
    z-index: 100;
    border: green 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
}

updated fiddle

Upvotes: 1

Related Questions