如何垂直对齐父 div 中的子 div？答案

【问题标题】：How to vertically align the child divs in a parent div?如何垂直对齐父 div 中的子 div？
【发布时间】：2016-08-01 21:26:20
【问题描述】：

所以我有 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>

【问题讨论】：

顺便说一句，我注意到您有几个元素的 ID 冲突（3x lists 和 3x h3）。你会想要解决这个问题。

标签： html css alignment vertical-alignment

【解决方案1】：

试试这个

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

【讨论】：

虽然此代码可能有助于解决问题，但提供有关 why 和/或如何回答问题的额外上下文将显着改善其长期长期价值。请edit你的答案添加一些解释。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：