使用CSS和DIV垂直對齊
[英]Vertical-align using CSS and DIV
問題描述
我試圖使我的評論垂直居中。 但是，它只是行不通。 我已經附上了代碼和實際位置的屏幕截圖。
怎么了？
.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>
3 個解決方案
解決方案1
1 已采納 2013-06-02 18:38:46
解決方案2
0 2013-06-02 18:41:52
浮動和顯示不能一起使用。
表格單元格垂直居中居中。
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 */
}
解決方案3
0 2013-06-03 01:13:39
通過在表單元格中使用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將Vertical-Align設置為div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.