Html 使用CSS和DIV进行垂直对齐_Html_Css

Html 使用CSS和DIV进行垂直对齐

html css

Html 使用CSS和DIV进行垂直对齐,html,css,Html,Css,我试图让我的评论垂直居中。然而，它只是不起作用。我附上了代码和实际位置的截图怎么了 .comment { min-height: 400px; background-color: red; padding: 5px; float: left; display: table-cell; vertical-align: middle; } …HTML： <tr> <td colspan="2"> &

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

怎么了

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


帕特里克·雷克，拜托，你能不能已经开始工作了！

根据规范

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

使用定值高度元素可以得到的预期结果

所以你可以试试这个

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

浮动和显示不能一起工作

表格单元格垂直居中于中间

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

您可以简单地将html设置为如下所示：

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

    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  */
}

通过在表格单元格中使用div，您可以双向下注。为什么不干脆扔掉桌子，用div呢？下面是一个例子：


.包裹{
显示：表格；
最小高度：400px；
填充物：5px；
背景：红色；
}
.wrap div.comment{
显示：表格单元格；
垂直对齐：中间对齐；
}
帕特里克·雷克，拜托，你能不能已经开始工作了！

ps：使用

而不是
。后者已被弃用。垂直对齐：中间确实不可靠。。。我从来没用过它，卑诗省，它似乎从来都不会正常工作all@lawnlanders-垂直对齐对于现代浏览器来说是完全可靠的。当一个人不能正确地理解哪个盒子与另一个盒子对齐时，通常会出现问题。这些盒子的布局和尺寸有时很难察觉。
<!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>