我该如何垂直地把这两个div连起来？

Question

我有以下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中的文本被砸到了底部。每当我试图调整内部框的边距时，它就会破坏绿色框的格式。

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

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

Answer 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边距，那么您将看到您的文本也是使用柔性盒居中。

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

​