[英]How to align vertically a `inline-block` element inside a `<td>` element?
I can't manage to align vertically a inline-block
<span>
element inside a <td>
element (which has its default display: table-cell
style). 我无法在
<td>
元素(具有默认display: table-cell
样式) inline-block
垂直对齐inline-block
<span>
元素。
Both elements have fixed sizes: the <td> is 24px tall and so is the
`. 两个元素都有固定的大小:
<td> is 24px tall and so is the
`。
I would expect both elements to have the same rendered size, as none of them has a margin or a padding. 我希望这两个元素具有相同的渲染大小,因为它们都没有边距或填充。 However, it seems the
<td>
is somehow taller than expected and I can't figure out why. 然而,似乎
<td>
比预期更高,我无法弄清楚原因。
Example in this jsfiddle . 这个jsfiddle的例子 。
Do you know why that happens and how to "fix" it ? 你知道为什么会发生这种情况以及如何“修复”它吗?
Add font-size:0
to td class 添加
font-size:0
到td类
td {
height: 24px;
vertical-align: middle;
background-color: red;
margin: 0;
padding: 0; font-size:0
}
Updated Demo http://jsfiddle.net/NxmhC/1/ 更新演示http://jsfiddle.net/NxmhC/1/
Align the span: 对齐范围:
span.foo {
display: inline-block;
height: 24px;
width: 16px;
background-color: lime;
margin: 0;
padding: 0;
vertical-align: top;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.