vertical-align：位于容器内div的中间

Question

我在div定位方面遇到了一些麻烦。 我正在开发一个注释系统，其中注释可以得到赞成和反对。 对于每个评论，向上/向下投票按钮都需要留在我的评论文本中，并在我的评论容器div的中间垂直对齐。 （不管评论有多大）

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

在测试用例中，我希望左侧一直向下拉伸，红色框垂直居中位于左侧中间。 vertical-align和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

像这样

演示

的CSS

div.commentContainer{
    float:left;
    border:1px solid blue;
    display:table;
}
div.leftside {
    display:table-cell;
    width: 50px;
    background: gray;
    text-align: center;

}
div.innerleft {

    width: 25px;
    height: 25px;
    margin-left:13px;
    background: red;
        vertical-align:middle;
}
div.CommentBox {
    display:table-cell;
    width:200px; 
    background-color:green;
}

Answer 2

在使用float的内部，使用inline-block 。

JSFiddle

的CSS

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

有关inline-block空白的问题可以单独解决。

Answer 3

从.commentbox和.leftside移除float ，并添加display:table-cell并带有vertical-align:middle

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
}

演示