html - 垂直对齐 :middle on a div within a container

Question

我在 div 定位方面遇到了一些问题。我正在开发一个评论系统，评论可以得到赞成票和反对票。对于每条评论，向上/向下投票按钮需要位于我的评论文本的左侧，并在我的评论容器 div 的中间垂直对齐。 (不管评论多大)

目前它无法正常工作，因为按钮不会到达 div 的中间。 (参见:http://jsfiddle.net/mcSfe/1838/)

在测试用例中，我希望左侧一直向下拉伸(stretch)，并且红色框在左侧中间垂直居中。 vertical-align, and display:table-cell, 没有带来正确的结果..

这是我的测试 html 代码:

<div class="commentContainer">
<div class="leftside">
    <div class="innerleft">
        test
    </div>
</div>
<div class ="CommentBox">
    <p>hello</p>
    <p>this is my comment</p>
    <p>another line of comment</p>
</div>

这是我的测试 CSS 代码:

div.commentContainer{
    float:left;
    border:1px solid blue;
}
div.leftside {
    float:left;
    width: 50px;
    background: gray;
    text-align: center;
}
div.innerleft {
    float:left;
    width: 25px;
    height: 25px;
    margin-left:13px;
    background: red;
}
div.CommentBox {
    float:right;
    width:200px; 
    background-color:green;
}

Answer 1

从 .commentbox 和 .leftside 中删除 float 并添加 display:table-cell 和 垂直对齐:中间

div.commentContainer{
    float:left;
    border:1px solid blue;
}
div.leftside {
    width: 50px;
    background: gray;
    text-align: center;
    display: table-cell;
    vertical-align: middle
}
div.innerleft {
    float:left;
    width: 25px;
    height: 25px;
    margin-left:13px;
    background: red;
}
div.CommentBox {
    width:200px; 
    background-color:green;
    display: table-cell
}

DEMO