0

我试图让我的评论垂直居中。但是，它只是不起作用。我附上了代码和实际位置的屏幕截图。

怎么了？

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

在此处输入图像描述

4

3 回答 3

1

根据CSS 2.1规范

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

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

所以你可以试试这个

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

JS小提琴

于 2013-06-02T18:38:46.223 回答
0

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

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

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  */
}
于 2013-06-02T18:41:52.703 回答
0

通过在表格单元格中使用 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>
于 2013-06-03T01:13:39.000 回答