Question

我在div定位方面遇到了一些麻烦。我正在研究一个评论系统，评论可以得到upvotes和downvotes。对于每个评论，上/下投票按钮需要留在我的评论文本中，并在我的评论容器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

喜欢这个

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

Answer 2

使用浮动内部时，请使用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

从float和.commentbox移除.leftside，并在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

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

3 个答案: