如何在父div中垂直对齐子div？

Question

因此，我有1个父div和4个子div。 我已经在父div中水平对齐了这些子div，但是它们却没有垂直对齐，就像子div放置方式的图形一样。 如何垂直对齐它们？

 .servicesContent { border: solid red 2px; font-family: arial; width: 70%; margin: 0 auto; } .servicesH1 { text-align: center; color: #3a414e; } .servicesContent h2 { color: #3a414e; } #h3 { color: #3a414e; } .contentLists { border: solid green 2px; width: 100%; text-align: center; } #lists { display: inline-block; text-align: center; padding: 5px; margin: 5px; border: 1px solid blue; height: 190px; } 

 <div class="servicesContent"> <h1 class="servicesH1">Services</h1> <h2>Help!</h2> <p>Child Divs are not vertically aligned</p> <p>Help</p> <div class="contentLists"> <div id="lists"> <h3 id="h3">first</h3> <ul> <li>afasasf</li> <li>fasfsafas</li> </ul> </div> <div id="lists"> <h3 id="h3">second</h3> <ul> <li>gdagadg</li> <li>agadgadg</li> </ul> </div> <div id="lists"> <h3 id="h3">third</h3> <ul> <li>dsfdsfs</li> </ul> </div> <div id="lists"> <h3 id="h3">fourth</h3> <ul> <li>dagadg</li> <li>agadgdhtjrs</li> <li>jjee</li> <li>ejtejtjejejgfhdgh</li> <li>Gtejjtejejtds</li> </ul> </div> </div> 

Answer 1

尝试这个

 #lists {
                  display: inline-block;
                  text-align: center;
                  padding: 5px;
                  margin: 5px;
                  border: 1px solid blue;
                  height: 190px;
             vertical-align: middle;
                }

Answer 2

请尝试添加vertical-align: top; 如下

 #lists {
  display: inline-block;
  text-align: center;
  padding: 5px;
  margin: 5px;
  border: 1px solid blue;
  height: 190px;
  vertical-align: top;
}

Answer 3

我认为在新浏览器中对齐元素的最佳方法是使用Flexbox。 使用justify-content center，contentList的所有元素将水平对齐，使用align-items：center，它们也将垂直对齐。 有关Flexbox的更多信息，请查看以下网址 ： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

.contentLists {
     display: flex;
     justify-content: center;
     align-items: center;
}