Align divs horizontally to the center

Question

I've got this short code:

#div1 div {
    margin: 0% 0,5%;
    display: inline-block;
    color: white;
    border: 1px dotted yellow;
    align: center;
}
#div1 {
    margin: 0px auto;
    width: 620px;
    height: 100px;
    background-color: black;
    overflow: hidden;
    text-align: center;
}

#div2, #div10 {
    width: 21px;
    height: 100px;
}

#div3, #div9 {
    width: 60px;
    height: 60px;
}

#div4, #div8 {
    width: 70px;
    height: 70px;
}

#div5, #div7 {
    width: 77px;
    height: 77px;
}

#div6 {
    width: 85px;
    height: 85px;
}

<div id="div1">
    <div id="div2">Content2</div>
    <div id="div3">Content3</div>
    <div id="div4">Content4</div>
    <div id="div5">Content5</div>
    <div id="div6">Content6</div>
    <div id="div7">Content7</div>
    <div id="div8">Content8</div>
    <div id="div9">Content9</div>
    <div id="div10">Content10</div>
</div>

I would like to be able to horizontally align these divs so they are not aligned to the top of my main div but to the center. I tried it many different ways, such as padding, margin, but i wasn't able to figure out how to do it.

Do you have any idea?

if you meant horizontally position all your divs, simply add `float:left` or `display:inline-block` to your individual divs style — Manish Mishra, Sep 28 '15 at 13:46
possible duplicate of [How to align a
to the middle (horizontally/width) of the page](http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page) and a host of other answers from an SO search. — Rob, Sep 28 '15 at 13:50

score 1 · Answer 1 · edited Sep 28 '15 at 14:32

1

Just add vertical-align:middle; on the rule above:

CSS

#div1 div {
  margin: 0% 0,5%;
  display: inline-block;
  color: white;
  border: 1px dotted yellow;
  align: center;
  vertical-align: middle;
}

DEMO HERE

edited Sep 28 '15 at 14:32

Eric

6,563
5
42
66

answered Sep 28 '15 at 13:46

Luís P. A.

9,524
2
23
36

I totally forgot about this parameter ! Thank you very much. I so many site using valign: middle; but this seems not to be working, do you know where this come from ? – B.T Sep 28 '15 at 13:47
@Ezhno valign was deprecated years ago and should not be used. – Rob Sep 28 '15 at 13:52

score 0 · Answer 2 · answered Sep 28 '15 at 14:21

Hey if you are having some confusion or problem of using vertical-align:middle you can go through below example

I have added a new div inside of div with id div2 to div10 and updated css

   

 #div1 > div {
   display: inline-block;
   align: center;
   margin: 0% 0, 5%;
   position: relative;
   top: 50%;
  }
   #div1 > div[id] > div {
    transform: translateY(-50%);
    color: white;
    border: 1px dotted yellow;
   }
   #div1 {
    margin: 0px auto;
    width: 620px;
    height: 100px;
    background-color: black;
    overflow: hidden;
    text-align: center;
   }

   #div2 > div, #div10 > div {
    width: 21px;
    height: 100px;
   }

   #div3 > div, #div9 > div {
    width: 60px;
    height: 60px;
   }

   #div4 > div, #div8 > div {
    width: 70px;
    height: 70px;
   }

   #div5 > div, #div7 > div {
    width: 77px;
    height: 77px;
   }

   #div6 > div {
    width: 85px;
    height: 85px;
   }

<div id="div1">

   <div id="div2">
    <div>
     Content2
    </div>
   </div>
   <div id="div3">
    <div>
     Content3
    </div>
   </div>
   <div id="div4">
    <div>
     Content4
    </div>
   </div>
   <div id="div5">
    <div>
     Content5
    </div>
   </div>
   <div id="div6">
    <div>
     Content6
    </div>
   </div>
   <div id="div7">
    <div>
     Content7
    </div>
   </div>
   <div id="div8">
    <div>
     Content8
    </div>
   </div>
   <div id="div9">
    <div>
     Content9
    </div>
   </div>
   <div id="div10">
    <div>
     Content10
    </div>
   </div>
  </div>

JSFIDDLE: https://jsfiddle.net/9tdzqvot/

Align divs horizontally to the center

2 Answers2