Другой вертикальный Align вопрос

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; 
} 

У меня больше проблем с выравниванием по вертикали «дом-признакам-class- 3 'div в розовом «домашнем признаке-классе-А». Кто-то может помочь? Я никогда не смогу добиться успеха с вертикальными выравниваниями

Answer 1

Попробуйте это: http://jsfiddle.net/o6ekutaL/2/

Примечания:

• Вы можете вертикально выравнивать с помощью vertical-align: middle;
• Но это работает только, если ваши дивы установлены на display: inline-block;
• Используя display: inline-block;, вам не нужно устанавливать поплавки, он уже плавает.
• Я установил ширины, используя проценты, так что это также макет жидкости.
• Альтернатива будет использовать хакерство display: table-cell, но в целом я бы предпочел это.