另一個垂直對齊問題

Question

的jsfiddle：https://jsfiddle.net/o6ekutaL/

HTML

<div id="main-body-wrap"> 
    <div id="main-body"> 

<div id="home-featured-classes-wrap"> 

<div class="home-featured-class-A"> 
<div class="home-featured-class-4"> TEXT 
<h6 class="products">TEXT 

</div> 

<div class="home-featured-class-3">THIS DIV NEEDS TO BE IN THE MIDDLE OF THIS PINK DIV, NOT AT THE TOP</div> 

<div class="clear"></div> 
</div> 

</div> 

<div class="clear"></div> 

     </div></div> 

CSS

/* MAIN BODY */ 
#main-body-wrap{ 
    width:100%; 
    height:auto; 
    margin: 0 auto; 
    border-bottom: 1px solid #211c20; 
    padding: 30px 0 30px 0; 
} 
#main-body{ 
    width:960px; 
    height:auto; 
    margin: 0 auto; 
} 

.clear { 
    clear: both; 
} 

.home-featured-class-2{ 
    width:628px; 
    height:auto; 
    margin:0 30px 0 0; 
    border: 1px solid #211c20; 
    float:left; 
} 
.home-featured-class-3{ 
    width:628px; 
    height:auto; 
    margin:0 0 0 30px; 
    border: 1px solid #211c20; 
    float:left; 
} 
.home-featured-class-4{ 
    width:298px; 
    height:auto; 
    margin:0 0px 0 0; 
    border: 1px solid #211c20; 
    float:left; 
} 
.home-featured-class-A{ 
    width:100%; 
    height:auto; 
    background:#C3C; 
    vertical-align:middle; 
} 
#home-featured-classes-wrap{ 
    width:auto; 
    height:auto; 
    margin: 30px 0 0 0; 
} 

我有更多的麻煩垂直對齊「家電功能，講座粉紅色'家庭特色A級'分區中的3'div。有人可以幫忙嗎？我從未與垂直對齊成功

Answer 1

試試這個：http://jsfiddle.net/o6ekutaL/2/

注：

• 可以垂直對齊使用vertical-align: middle;
• 但這僅適用於如果你的div設置爲display: inline-block;
• 通過使用display: inline-block;您不需要設置浮動，它已經浮動。
• 我使用百分比設置寬度，所以它也是流暢的佈局。
• 另一種方法是使用一些display: table-cell hackery，但總的來說我更喜歡這個。