vertical-align:middle 在容器内的 div 上答案

【问题标题】：vertical-align:middle on a div within a containervertical-align:middle 在容器内的 div 上
【发布时间】：2014-02-05 07:19:18
【问题描述】：

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

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

在测试用例中，我希望左侧一直向下拉伸，红色框垂直居中在左侧中间。垂直对齐和显示：表格单元格，没有带来正确的结果..

这是我的测试 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;
}

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

从.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
}

DEMO

【讨论】：

谢谢，成功了！我正在 Dreamweaver 中解决此问题，但我的设计视图未正确显示。知道问题可能出在哪里吗？（我通过 w3c 验证器运行了 html 和 css，它似乎没有包含错误）？
Somwtime Dreamweaver 设计视图不会按原样显示。即使我使用 Dreamweaver，我也从不查看设计视图。

【解决方案2】：

喜欢这个

demo

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

【讨论】：

【解决方案3】：

在使用浮点数的内部，使用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 空白的问题可以单独解决。

【讨论】：