垂直对齐仅部分工作

Question

你知道为什么我的绿色DIV没有与红色DIV的中间垂直对齐，以及如何解决这个问题？非常感谢 http://jsfiddle.net/kAXp9/

.wrapper-alt {

    margin-right: auto;
    margin-left: auto;
    width: 980px;
    display:table;
    border: 1px solid #000;
}   

.bigtext {
    color: #124191;
    font-weight: 600;
    font-size: 53px;
    text-align: right;
    line-height: 53px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.block-left-alt, .block-right-alt {
    display:table-cell;
    vertical-align:middle;
    padding:30px 0;
    height:100%;
    box-sizing: border-box;
}

.block-left-alt {
float: left;
background: red;
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width: 50%;
    text-align: right;
    padding-right: 10px;
}

.block-right-alt {
float: left;
background: green;
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width: 50%;
}

<div class="wrapper-alt">
<div class="block-left-alt bigtext">Pourquoi<br>faire appel<br> à nos services?</div>
<div class="block-right-alt"><ul class="bullets1-alt">
      <li><i class="fa fa-check"></i> Reason 1</li>
        <li><i class="fa fa-check"></i> Reason 2</li>
        <li><i class="fa fa-check"></i> Reason 3</li>
      </ul>
</div>
</div><!-- End Wrapper -->

Answer 1

删除

float:left

来自.block-left-alt和.block-right-alt

Updated fiddle here.

Answer 2

Live Demo

你使用浮动。由于浮动，<div>离开了对象流，因此您无法将其高度设置为100%。

一个棘手的解决方案是将父<div>的背景颜色设置为与较小的<div>相同。因此，请将background: green;添加到.wrapper-alt。