Question

我试图让我的评论垂直居中。然而，它只是没有工作。我已经附上了代码和实际位置的屏幕截图。

有什么问题？

.comment {
    min-height: 400px;
    background-color: red;
    padding: 5px;
    float: left;
    display: table-cell;
    vertical-align: middle;
}

.. HTML：

<tr>
    <td colspan="2">
        <div class="profile_picture_container">
            <img class="profile_picture" src="URL" />
        </div>
        <div class="comment">
            <b>Patrick Reck</b> Come on, would you just work already!
        </div>
    </td>
</tr>

enter image description here

Answer 1

根据CSS 2.1规范

单元格框的高度是内容所需的最小高度。表格单元格的“高度”属性可以影响行的高度，但不会增加单元格框的高度。

使用固定值Height元素可获得的预期结果。

所以你可以试试这个

.comment {
    height: 400px;
    background-color: red;
    padding: 5px;
    display: table-cell;
    vertical-align: middle;
}

JS Fiddle

Answer 2

浮动和显示不能一起工作。

表格单元格在中间垂直居中。

img，是文本或其他内联框之间的内联框和垂直中心。

你可以简单地制作你喜欢的HTML：

<td>
  <img />
  <span>text</span>
</td>

你的css是这样的：

    td,
    td img,
    td span {vertical-align:middle;}
    /* turn span into an inline boxe */
    td span {display:inline-block;
    /* you may need a max-width or set 
    white-space to "no-wrap" on td and back to "normal" on span  */
}

Answer 3

通过在表格单元格中使用div，您可以通过两种方式下注。为什么不完全放弃桌子并使用div？这是一个例子：http://codepen.io/pageaffairs/pen/JmzEe

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.wrap {
    display: table;
    min-height: 400px;
    padding: 5px;
    background: red;
}

.wrap div.comment {
    display:table-cell;
    vertical-align: middle;
}
</style>

</head>

<body>
<div class="wrap">
    <div class="profile_picture_container">
        <img class="profile_picture" src="URL" />
    </div>
    <div class="comment">
        <b>Patrick Reck</b> Come on, would you just work already!
    </div>
</div>
</body>
</html>

使用CSS和DIV进行垂直对齐

3 个答案: