另一个垂直对齐问题

时间:2015-06-09 20:01:54

标签: html css alignment

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

我在垂直调整“家庭特色”类3&#39;在粉红色的家庭特色类A&#39; DIV。有人可以帮忙吗?我永远无法成功进行垂直对齐

1 个答案:

答案 0 :(得分:0)

试试这个:http://jsfiddle.net/o6ekutaL/2/

注意:

  • 您可以使用vertical-align: middle;
  • 垂直对齐
  • 但这只适用于您的div设置为display: inline-block;
  • 的情况
  • 使用display: inline-block;你不需要设置浮点数,它已经浮动了。
  • 我使用百分比设置宽度,因此它也是流畅的布局。
  • 另一种方法是使用一些display: table-cell hackery,但总的来说我更喜欢这个。