将div与中心水平对齐

Question

我有这个简短的代码：

 #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> 

我希望能够水平对齐这些div，以便它们不与我的主div的顶部对齐，而是与中心对齐。 我尝试了许多不同的方法，例如填充，边距，但是我不知道该怎么做。

你有什么主意吗？

Answer 1

只需添加vertical-align:middle; 根据以上规则：

CSS

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

此处演示

Answer 2

嘿，如果您在使用vertical-align:middle遇到困惑或问题vertical-align:middle您可以看下面的示例

我在div10中添加了ID为div2的div中的新div，并更新了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/