Html 垂直对齐TD中的所有（！）元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18941108/
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
Vertical align all(!) elements in TD?
提问by Royi Namir
I have a simple tablewith 1 TDwith vertical-align:middle;. This TDcontains an Image:
我有一个简单的tablewith 1 TDwith vertical-align:middle;. 这TD包含一个Image：
<table>
<tr>
<td>
<img src='http://static.jsbin.com/images/favicon.png'/>
</td>
</tr>
</table>
Everything is Ok and the IMGis vertical-aligned.
一切正常，并且IMG垂直对齐。
ButIf I add another elements after that Image ( a spanfor example ) :
但是，如果我在该图像之后添加另一个元素（span例如 a）：
<td>
<img src='http://static.jsbin.com/images/favicon.png'/>
<span>aaa</span>
</td>
The result is :
结果是：
Question
题
Doesn't the vertical align of the TD should vertical align allits childs ?
TD 的垂直对齐不应该垂直对齐它的所有孩子吗？
How can I make the spanto be centered as well?
我怎样才能让span为中心，以及？
NB
NB
I don't want to add another TD, nor using floatwith padding/margin. IE8+.
我不想添加另一个TD，也不想使用float填充/边距。IE8+。
edit:
编辑：
Desired result :
想要的结果：
回答by Nikhil Patel
Question
Doesn't the vertical align of the TD should vertical align all its childs ?
问题
TD 的垂直对齐不应该垂直对齐它的所有孩子吗？
NO.
When you apply vertical-alignto td, it is only applied to td, and is notinherited by any of its children.
否。
当您应用于vertical-align时td，它仅应用于td，并且不会被其任何子代继承。
If i have a TD with only span in it - it will vertical align. If I had a TD with only IMG inside it - it will also align.
如果我有一个只有跨度的 TD - 它会垂直对齐。如果我有一个里面只有 IMG 的 TD - 它也会对齐。
This is because of the way vertical-alignfor tdworks. The total height of the cell i.e tdis calculated and the whole cellis aligned vertically.
这是因为这样vertical-align的td作品。td计算单元格 ie 的总高度，并将整个单元格垂直对齐。
If there is a single img, then the height of tdis same as that of img, so it seemsthat vertical-alignfor imgis also middle. But actually, the tdis vertically aligned to the middle with the imgas vertical-align : baseline
如果有一个单一img的，那么高度td是一样的img，所以它看起来是vertical-align为img也middle。但实际上，td与imgas垂直对齐到中间vertical-align : baseline
Same is the case when there is a single span.
当有单个span.
but if i have both - it doesn't. why is that ?
但如果我两者都有 - 它没有。这是为什么 ？
Because now, the heightof tdis the combined heightof both img+ span. So, actually, tdis vertically aligned in the middle, but not imgand span.
因为现在的height的td是合并height双方的img+ span。所以，实际上，td在中间垂直对齐，但不是img和span。
How can I make the span to be centered as well ?
我怎样才能使跨度也居中？
You need to apply this CSS :
你需要应用这个 CSS ：
td > * {
vertical-align : middle;
}
This will apply the CSS to all the children.
这会将 CSS 应用于所有子项。
Check the JSFiddlefor a better picture.
检查JSFiddle以获得更好的图片。
Hope, this answers your question.
希望，这回答了你的问题。
回答by Bhojendra Rauniyar
You can just use vertical-align: middle;to your span
你可以用vertical-align: middle;你的跨度
img
{
height:43px;width:43px;
display: inline;
vertical-align: middle;
}
span
{
vertical-align:middle;
display: inline;
}
As per comment
根据评论
You may think as if td is given vertical-align: middle;then it should align all the contents inside this but having an image and a span in which browser is understanding the image is what? : is this inline or inline-block, so you need to set display: inline or inline-block; Then you may see its working only applying display property for image. demo
您可能会认为好像 td 是给定的，vertical-align: middle;那么它应该对齐其中的所有内容，但是具有图像和浏览器正在理解图像的跨度是什么？: 这个是inline还是inline-block，所以需要设置display:inline或者inline-block；然后你可能会看到它只为图像应用显示属性。演示
Edit
编辑
img tag : source: display inline vs inline-block
img 标签：源代码：显示内联 vs 内联块
They are "block" elements in that they have a width and a height.
它们是“块”元素，因为它们具有宽度和高度。
It's true, they are both - or more precisely, they are "inline block" elements. This means that they flow inline like text, but also have a width and height like block elements.
的确，它们都是——或者更准确地说，它们是“内联块”元素。这意味着它们像文本一样内联流动，但也像块元素一样具有宽度和高度。
Replaced Elements
替换元素
A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images ( tags), plugins ( tags), and form elements (, , , and tags). All other elements types can be referred to as non-replaced elements.
Replaced elements can have intrinsic dimensions—width and height values that are defined by the element itself, rather than by its surroundings in the document. For example, if an image element has a width set to auto, the width of the linked image file will be used. Intrinsic dimensions also define an intrinsic ratio that's used to determine the computed dimensions of the element should only one dimension be specified. For example, if only the width is specified for an image element—at, say, 100px—and the actual image is 200 pixels wide and 100 pixels high, the height of the element will be scaled by the same amount, to 50px.
Replaced elements can also have visual formatting requirements imposed by the element, outside of the control of CSS; for example, the user interface controls rendered for form elements.
In an inline formatting context, you can also think of a replaced element as being one that acts as a single, big character for the purposes of wrapping and layout. A width and height can be specified for replaced inline elements, in which case the height of the line box in which the element is positioned is made tall enough to accommodate the replaced element, including any specified box properties.
替换元素是外观和尺寸由外部资源定义的任何元素。示例包括图像（标签）、插件（标签）和表单元素（、、、和标签）。所有其他元素类型都可以称为非替换元素。
被替换的元素可以有内在的尺寸——宽度和高度值由元素本身定义，而不是由它在文档中的周围环境定义。例如，如果图像元素的宽度设置为自动，则将使用链接图像文件的宽度。内在尺寸还定义了一个内在比率，用于确定元素的计算尺寸，应该只指定一个尺寸。例如，如果只为图像元素指定了宽度（例如 100 像素），而实际图像的宽度为 200 像素，高度为 100 像素，则元素的高度将按相同的比例缩放至 50 像素。
被替换的元素也可以具有由元素强加的可视化格式要求，不受 CSS 控制；例如，为表单元素呈现的用户界面控件。
在内联格式设置上下文中，您还可以将替换元素视为用于包装和布局的单个大字符。可以为替换的行内元素指定宽度和高度，在这种情况下，元素所在的行框的高度足够高以容纳替换的元素，包括任何指定的框属性。
回答by Anobik
Here's a JS fiddle solution
这是一个 JS 小提琴解决方案
Here's the css
这是css
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
display: inline;
height: 43px;
width: 43px;
position: relative !important;
float: left;
}
span
{
height: auto !important;
width: 80%;
float: right;
position: relative;
vertical-align: middle !important;
text-align: left;
}
回答by Harry
In all the cases, the vertical-align: middle;on the tddoes what is expected of it. That is, align the tdto the center of that row and the entire contents of the tdto the vertical middle (by default) leaving equal spaces at the top and the bottom.
在所有情况下，vertical-align: middle;on 都会td执行预期的操作。也就是说，将 对齐td到该行的中心，并将 的全部内容对齐到td垂直中间（默认情况下），在顶部和底部留下相等的空间。
Here is what the W3 Specsays about
vertical-align: middle:The center of the cell is aligned with the center of the rows it spans.
以下是W3 规范所说的内容
vertical-align: middle：单元格的中心与其跨越的行的中心对齐。
Row height calculation:
行高计算：
The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells.
In CSS 2.1, the height of a cell box is the minimum height required by the content. The table cell's 'height' property can influence the height of the row (see above), but it does not increase the height of the cell box.
Cell boxes that are smaller than the height of the row receive extra top or bottom padding.
'table-row' 元素框的高度在用户代理拥有行中所有可用单元格后计算：它是该行计算的“高度”的最大值，该行中每个单元格的计算“高度”，和单元格所需的最小高度 (MIN)。
在 CSS 2.1 中，单元格框的高度是内容所需的最小高度。表格单元格的“高度”属性可以影响行的高度（见上文），但不会增加单元格框的高度。
小于行高度的单元格会收到额外的顶部或底部填充。
As a result of the above, the height of the trand the tdbecomes 100px but the cell box takes up only the amount of height required by the contents (imgheight = 43px). Now since the Cell box is smaller than the row height, extra padding is added like shown in Box 5 of the image above and thus makes the contents also get aligned to the middle.
上面的结果是，thetr和 the的高度td变成了 100px，但是 cell box 只占用了内容所需的高度量（imgheight = 43px）。现在，由于 Cell 框小于行高，因此添加了额外的填充，如上图的框 5 所示，从而使内容也与中间对齐。
TD has only image:
TD只有图像：
When there is only an img, the content height is equal to the height of the img. So it gets positioned to the middle.
当只有一个 时img，内容高度等于 的高度img。所以它被定位到中间。
As can be seen in the above image, this does not require a vertical-align: middleon the imgexplicitly because the tdaligns its contents to the middle.
从上图中可以看出，这不需要显式地使用a vertical-align: middle，img因为td将其内容与中间对齐。
TD has only inline data:
TD 只有内联数据：
When the tdhas only a spanor spanplus an inline div, the height of the content is equal to the default line-heightfor text (or any specified line-height). In this case also, the tdaligns it correctly.
当td只有 aspan或spanplus 一个 inline 时div，内容的高度等于line-heighttext的默认值（或任何指定的line-height）。在这种情况下，td它也会正确对齐。
When the text content goes beyond the first line (refer to the demo), you can see that the tdautomatically pushes the first-line(marked in cyan background) upwards to ensure that the contents on the whole is aligned to the middle (not just a single line).
当文本内容超出第一行时（参考demo），可以看到td自动将first-line（青色背景标记）向上推，保证整体内容居中对齐（不只是单行） ）。
TD has an image and a span:
TD 有一个图像和一个跨度：
When we put an imgand a span(inline text) within the td, the content height becomes equal to the height of the imgplus the line-heightof the second and subsequent lines.
当我们将 animg和 a span（内联文本）放在 中时td，内容高度将等于第二行和后续行的img加号的高度line-height。
In this situation, there are two possible cases as described below:
在这种情况下，有两种可能的情况，如下所述：
Case 1 -imgtag has novertical-alignspecified
情况 1 -img没有指定标签vertical-align
In this case, the imgis aligned to the baseline(default). Then the tdaligns the entire content to the middle. This means the tdleaves around 28.5px (= (100-43)/2) gapat the top and the bottom of the content. Again, the vertical-alignon tddoes the job, it puts the contents in the middle (that is, leave equal gap on top and bottom). But the text gets pushed down because imgheight is more.
在这种情况下，img与baseline（默认）对齐。然后td将整个内容对齐到中间。这意味着在内容的顶部和底部td留下大约28.5px (= (100-43)/2) 的间隙。同样，vertical-alignontd完成工作，它将内容放在中间（即，在顶部和底部留出相等的间隙）。但是文本被推下，因为img高度更多。
If we reduce the imgheight to less than the line height (say 10px), we can see that even with img+ spanit gets aligned to the middle.
如果我们将img高度减小到小于行高（比如 10px），我们可以看到即使使用img+span它也会对齐到中间。
Case 2 -imgtag hasvertical-align: middle
案例 2 -img标签有vertical-align: middle
In this case also vertical-alignon the tddoes the same as what it did for Case 1. However, the text in this case is near the middlebecause the imgis also aligned to the middleof the line.
在这种情况下，vertical-alignon 的td作用与情况 1 相同。但是，这种情况下的文本靠近中间，因为img也与middle行的对齐。
table {
border: solid 1px red;
}
td {
height: 100px;
width: 200px;
vertical-align: middle;
border: solid 1px green;
}
img {
height: 43px;
width: 43px;
border: solid 1px green;
}
.one td + td img {
vertical-align: middle;
}
.three td + td img {
height: 10px;
width: 10px;
}
.four img {
vertical-align: middle;
}
.five img + img{
height: 50px;
width: 50px;
}
td:first-line {
background-color: cyan;
}
div {
display: inline;
}<table>
<tr class='one'>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
</tr>
<tr class='two'>
<td>
<div>aaa</div>
<span>aaa</span>
</td>
<td>
<div>aaa</div>
<span>aaa aaaaaaa aaaaaaaa aaaaaaaa</span>
</td>
</tr>
<tr class='three'>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
</tr>
<tr class='four'>
<td>
Case 2
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
<tr class='five'>
<td>
Case 3
<img src='http://static.jsbin.com/images/favicon.png' />
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span text...</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
</table>回答by Jazcash
回答by Ankit Agrawal
<style>
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
width:100%;
border:solid 1px green;
vertical-align:middle;
line-height:100px;
}
img
{
height:43px;width:43px;
vertical-align:middle;
}
</style>
回答by webfrogs
This CSS attribute doesn't go on any other kinds of elements. When the novice developer applies vertical-align to normal block elements (like a standard ) most browsers set the value to inherit to all inline children of that element.
此CSS 属性不会出现在任何其他类型的元素上。当新手开发人员将 vertical-align 应用于普通块元素（如标准）时，大多数浏览器都会将该值设置为继承该元素的所有内联子元素。
You simply need to add vertical-align: middleto the <img>class.
您只需要添加vertical-align: middle到<img>类中。
Your CSS should look like this...
你的 CSS 应该是这样的......
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
height:43px;width:43px;
vertical-align: middle;
}
You can view the Sample Fiddle...
您可以查看Sample Fiddle...
回答by Paulie_D
I think we are all nearly there but
我想我们都快到了，但是
td img,
td span {
display:inline-block;
vertical-align:middle;
}
seems to work.
似乎工作。
Or am I missing something?
或者我错过了什么？
回答by Mohsen Safari
just add this class:
只需添加这个类：
td *{
vertical-align:middle
}
Edit:
编辑：
question is why when you add a pic to the tdtext goes bottom of pic and not any more middle of td.
问题是为什么当你在td文本中添加图片时，会出现在图片的底部而不是 td 的中间。
this is my answer:
这是我的回答：
when you set tdvertical-alignto middleit should not set all content vertical-alignto middle, they are still baseline. and when you add a pic to the text, the line height rise to the height of image and text is bottom of this height, so you need to set vertical-alignto middlefor fix this problem.
当您设置tdvertical-align为middle它时，不应将所有内容都设置vertical-align为middle，它们仍然是baseline。并且当你在文本中添加图片时，行高上升到图像的高度，文本在这个高度的底部，所以你需要设置vertical-align为middle来解决这个问题。
here you can see what i said: DEMO
在这里你可以看到我说的：DEMO
and sorry about my bad english
很抱歉我的英语不好
回答by andrewb
Is this what you mean? http://jsfiddle.net/JFVNq/
你是这个意思吗？http://jsfiddle.net/JFVNq/
The reason is spans are treated as inline so you need to make them block.
原因是跨度被视为内联，因此您需要使它们阻塞。
CSS for the span:
跨度的 CSS：
td.vert span
{
vertical-align: middle;
display: block;
}
