如何将这两个 div 垂直排列？答案

【问题标题】：How do I line these two divs up vertically?如何将这两个 div 垂直排列？
【发布时间】：2015-12-02 23:24:37
【问题描述】：

我有以下 HTML 标记：

<div id="pageWrapper">
  <div style="display: block; float: left; clear: left; border: 1px solid green;">
    <div style="display: inline-block; margin-top: 0; padding-top: 0; border: 1px solid red;">
      <img src="http://i.imgur.com/5OluoVs.png" height="95" width="75" /> <!-- some random image from imgur for test purposes -->
    </div>

    <div style="display: inline-block; border: 1px solid blue;">
      <h4>Main Object</h4>
      <p style="margin: 0; padding: 0;">
        Attribute 1
      </p>
      <p style="margin: 0; padding: 0;">
        Attribute 2
      </p>
      <p style="margin: 0; padding: 0;">
        Attribute 3
      </p>
    </div>    
  </div>

https://jsfiddle.net/34xfgx5b/

您会看到有 3 个带边框的 div。绿色边框包含两个子 div。其中一个 div 有红色边框，另一个有蓝色边框。

我试图弄清楚如何让这两个 div 在绿色框内垂直居中对齐，这样图像垂直居中，文本也垂直居中。现在，它们都被卡在了底部，而且蓝色 div 中的文本被砸到了底部。每当我尝试调整内框的边距时，都会弄乱绿色框的格式。

我一直在尝试使用 vertical-align: middle 来实现这一点，但我无法让它为我工作。

如何让这两个内部 div 在绿色框内垂直居中，以及如何让文本在蓝色框内垂直居中？如果可能的话，我想尝试将所有样式保留在 HTML 中，因为在实际实现中，这需要是一个文件。

【问题讨论】：

垂直对齐：中间； sejsfiddle.net/34xfgx5b/3
添加文字jsfiddle.net/34xfgx5b/4

标签： html css alignment center

【解决方案1】：

使用 Flexbox :)

我整理了你的代码以拆分类：

您的 HTML：

<div id="pageWrapper">
  <div class="green">
    <div class="red">
      <img src="http://i.imgur.com/5OluoVs.png" height="95" width="75" /> <!-- some random image from imgur for test purposes -->
    </div>

    <div class="blue">
        <h4 class="title">Main Object</h4>
        <p class="pg">
          Attribute 1
        </p>
        <p class="pg">
          Attribute 2
        </p>
        <p class="pg">
          Attribute 3
        </p>
    </div>    
  </div>
</div>

你的 CSS：

.green {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px 
  solid green;
}

.red {
  border: 1px solid red;
}

.blue {
  border: 1px solid blue;
}

.title {
  margin: 0;
}

.pg {
  margin: 0; 
  padding: 0;
}

如果您使用删除 H4 边距的类标题，那么您会看到您的文本也使用 flexbox 居中。

【讨论】：

【解决方案2】：

你可以使用Flexbox

#div1 {
  border: 1px solid green;
  display: flex;
  justify-content: center; /* ALIGN TO THE CENTER HORIZONTALLY */
  align-items: center; /* ALIGN TO THE CENTER VERTICALLY*/
}

#div2 {
  margin-top: 0;
  padding-top: 0;
  border: 1px solid red;
}

#div3 {
  border: 1px solid blue;
}

<div id="pageWrapper">
  <div id="div1">
    <div id="div2">
      <img src="http://i.imgur.com/5OluoVs.png" height="95" width="75" />
      <!-- some random image from imgur for test purposes -->
    </div>

    <div id="div3">
      <h4>Main Object</h4>
      <p style="margin: 0; padding: 0;">
        Attribute 1
      </p>
      <p style="margin: 0; padding: 0;">
        Attribute 2
      </p>
      <p style="margin: 0; padding: 0;">
        Attribute 3
      </p>
    </div>
  </div>
</div>

【讨论】：