如何將這兩個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保證金，然後你會看到你的文本使用Flexbox的也集中。

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>