Html 将 div 与显示水平对齐：table-cell
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11523075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontally align div with display: table-cell
提问by Chris
I have a table with bars in it. I use display: table-cellin order to align the contents at the bottom. The problem is that the container divs no longer align horizontally over their corresponding THs (their width is not set)
我有一张桌子，里面有酒吧。我使用display: table-cell以对齐底部的内容。问题是容器divs 不再在其对应的THs 上水平对齐（它们的宽度未设置）
采纳答案by insertusernamehere
The Problem
问题
The problem when using the table-cell-attribute is that it behaves like "a real table cell" and no more like a block- or inline-element. When the parent elements table-rowand tableare missing they are generated anonymously. So the box will loose all the things like margin.
使用table-cell-attribute时的问题在于它的行为类似于“真正的表格单元格”，而不再像block- 或 -inline元素。当父元素table-row和table缺失时，它们是匿名生成的。所以盒子里的所有东西都会松动margin。
You can read more about this here: "Tables in the visual formatting model"
您可以在此处阅读更多相关信息：“可视化格式模型中的表格”
I rebuild your HTML structure a little and this seems to work fine:
我稍微重建了你的 HTML 结构，这似乎工作正常：
DEMO
演示
http://jsfiddle.net/insertusernamehere/XPSQG/
http://jsfiddle.net/insertusernamehere/XPSQG/
CSS
CSS
<style>
#graph th {
background: red;
}
#graph td {
min-width: 30px;
margin: 0;
padding: 0;
color: #222222;
}
#graph div {
display: block;
position: relative;
margin: 0 auto;
width: 30px;
max-width: 30px;
height: 100px;
background-color: #EFEFEF;
border: 1px solid #000000;
}
#graph span {
position: absolute;
left: 0;
top: -20px;
width: 100%;
color: #222222;
font-size: 16px;
line-height: 16px;
text-align: center;
}
#graph p.color {
position: absolute;
right: 0;
bottom: 0px;
width: 100%;
margin: 0;
color: #222222;
}
#graph p.color.c1 {
background: #0f0;
}
#graph p.color.c2 {
background: blue;
}?
</style>
HTMl
商标
<div id="graph">
<table>
<tr>
<td><div><p class="color c1" style="height:20px;"><span>1</span></p></div></td>
<td><div><p class="color c2" style="height:30%;"><span>2</span></p></div></td>
<td><div><p class="color c1" style="height:40%;"><span>3</span></p></div></td>
<td><div><p class="color c2" style="height:50%;"><span>4</span></p></div></td>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>Some long value</th>
</tr>
</table>
</div>
How it works
这个怎么运作
It basically places the content (green percentage <p>-tags) of the columns on the bottom. To have the numbers on top of thatyou can easily place them within the <p>-tag and them "move them out" again. This is done by this part:
它基本上将列的内容（绿色百分比 -<p>标签）放在底部。要将数字放在上面，您可以轻松地将它们放在<p>-tag 中，然后再次“将它们移出”。这是由这部分完成的：
top: -20px;
font-size: 16px;
line-height: 16px;
This says that the line-height and the font size are 16px. It would be enough to set top: -16pxto move it out completely - the additional 4px add a nice padding. :)
这表示行高和字体大小为 16px。设置top: -16px将其完全移出就足够了 - 额外的 4px 添加了一个很好的填充。:)
Hope you get the idea.
希望你明白。
Note
笔记
Somewhere you used this attribute:
您在某处使用了此属性：
countunit="0_1_0"
As this is not valid HTML please use the data-prefix:
由于这不是有效的 HTML，请使用data-prefix：
data-countunit="0_1_0"
This is valid HTML5 and it also won't cause any trouble in older browsers.
这是有效的 HTML5，它也不会在旧浏览器中造成任何问题。
回答by user25246
There is a trick to center horizontally an element with display: table-cell inside another element.
有一个技巧可以将一个元素水平居中显示：table-cell 位于另一个元素内。
Say the surrounding element has the class .table-wrapper and the inner element has .table-cell. Use the following CSS:
假设周围元素的类为 .table-wrapper，而内部元素的类为 .table-cell。使用以下 CSS：
.table-wrapper {
display: table;
width: 100%;
text-align: center;
}
.table-cell {
vertical-align: middle;
}
This way you center the text or whatever you want inside .table-cell vertically and also horizontally.
通过这种方式，您可以垂直和水平地将文本或任何您想要的内容放在 .table-cell 中。
