垂直alignmentTD中的所有（！）元素？

我有一个简单的table有1个TD ， vertical-align:middle; 。 这个TD包含一个Image ：

 <table> <tr> <td> <img src='http://static.jsbin.comhttp://img.dovov.comfavicon.png'/> </td> </tr> </table> 

一切正常， IMG垂直alignment。

但是，如果我添加其他元素之后的图像（例如span ）：

  <td> <img src='http://static.jsbin.comhttp://img.dovov.comfavicon.png'/> <span>aaa</span> </td> 

结果是：

题

运输署的垂直排列不应该垂直alignment所有的孩子吗？

我怎样才能使span为中心呢？

完整的JSBIN

NB

我不想添加另一个TD ，也没有使用填充/边距float 。 IE8 +。

编辑：

预期结果：

Answer 1

题
运输署的垂直排列不应该垂直alignment所有的孩子吗？

NO 。
当你将vertical-align应用到td ，它只适用于td ，并且不会被它的任何子tdinheritance。

如果我只有跨度的TD – 它将垂直alignment。 如果我有一个只有IMG的TD，它也会alignment。

这是因为td作品的vertical-align的方式。 计算单元的总高度即td ，并且整个单元垂直alignment。

如果只有一个img ，那么td的高度与img的高度相同，所以img vertical-align 似乎也是middle 。 但实际上， td垂直alignment中间与img vertical-align : baseline

有一个span的情况也是如此。

但如果我有两个 – 它不。 这是为什么 ？

因为现在， td的height是img + span的组合height 。 所以，实际上， td是垂直alignment的，但不是img和span 。

我怎样才能使跨度为中心呢？

你需要应用这个CSS：

 td > * { vertical-align : middle; } 

这将CSS应用于所有的孩子。

检查JSFiddle以获得更好的照片。

希望，这回答你的问题。

Answer 2

你可以使用vertical-align: middle; 到你的跨度

 img { height:43px;width:43px; display: inline; vertical-align: middle; } span { vertical-align:middle; display: inline; } 

你的jsbin

---

根据评论

---

你可能会认为，如果td是vertical-align: middle; 那么它应该alignment这里面的所有内容，但是有一个图像和跨度在哪个浏览器是理解图像是什么？ ：这是内联还是内嵌块，所以你需要设置display：inline或inline-block; 那么你可能会看到它的工作只适用于图像的显示属性。 演示

编辑

img标签：源： 显示内联VS内联块

他们是“块”元素，因为他们有宽度和高度。

确实，它们都是 – 或者更确切地说，它们是“内联块”元素。 这意味着它们像文本一样内联，而且像块元素一样具有宽度和高度。

另请检查：

replace的元素

被replace的元素是其外观和尺寸由外部资源定义的任何元素。 示例包括图像（标签），插件（标签）和表单元素（，和标签）。 所有其他元素types可以被称为非replace元素。

replace的元素可以具有固有的尺寸 – 由元素自身定义的宽度和高度值，而不是文档中的环境。 例如，如果图像元素的宽度设置为auto，则将使用链接的图像文件的宽度。 固有尺寸还定义了一个固有比率，用于确定元素的计算尺寸时，只应指定一个尺寸。 例如，如果只为图像元素指定宽度（例如100px），并且实际图像宽度为200像素，高度为100像素，则元素的高度将按相同的比例缩放至50像素。

replace的元素也可以具有元素施加的视觉格式要求，不受CSS控制; 例如，为表单元素渲染的用户界面控件。

在一个内联的格式化上下文中，你也可以把一个被replace的元素看作是一个为了包装和布局而作为一个单一的大字符的元素。 可以为被replace的内联元素指定宽度和高度，在这种情况下，元素所在的行盒的高度足够高以容纳replace的元素，包括任何指定的盒子属性。

Answer 3

这是一个JS小提琴解决scheme

小提琴

这是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; } 

Answer 4

只需添加vertical-align:middle; 到你的img风格？

演示

Answer 5

在所有情况下， vertical-align: middle; 在td做什么是预期的。 也就是说，将td与该行的中心alignment，将td的所有内容alignment垂直中间（默认情况下），在顶部和底部留出相等的空格。

这是什么W3 Spec说 vertical-align: middle ：

单元格的中心与其跨越的行的中心alignment。

行高计算：

一旦用户代理拥有行中的所有单元格，就计算'table-row'元素框的高度：它是行计算的“height”的最大值，行中每个单元格的计算“height”和单元所需的最小高度（MIN）。

在CSS 2.1中，单元格框的高度是内容所需的最小高度。 表格单元格的“高度”属性可以影响行的高度（请参阅上文），但不会增加单元格的高度。

小于行高度的单元格框会收到额外的顶部或底部填充。

由于以上所述， tr和td的高度变为100px，但单元格框只占用内容所需的高度（ img height = 43px）。 现在，由于“单元格”框比行高小，所以添加了额外的填充，如上图中的框5所示，从而使内容也与中间alignment。

---

TD只有形象：

当只有一个img ，内容高度等于img的高度。 所以它被定位在中间。

从上面的图片可以看出，这并不需要img上的vertical-align: middle ，因为td将其内容alignment到中间。

---

运输署只有内联资料：

当td只有一个span或span加内嵌div ，内容的高度等于文本的默认line-height （或任何指定的line-height ）。 在这种情况下， td也能正确alignment。

当文本内容超出第一行时（参见演示），您可以看到td自动将first-line （以青色背景标记）向上推，以确保内容整体与中间alignment只是一条线）。

---

运输署有一个形象和跨度：

当我们在td放置一个img和一个span （内联文本）时，内容高度等于img的高度加上第二行和后续行的行高。

在这种情况下，有两种可能的情况如下所述：

情况1 – img 标签没有 指定 vertical-align

在这种情况下， img与baselinealignment（默认）。 然后td将整个内容alignment到中间。 这意味着td在内容的顶部和底部留下大约28.5px（=（100-43）/ 2）的空白 。 再次， td上的vertical-align可以完成这个工作，它将内容放在中间（即在上下方向上保持相同的间隔）。 但是由于img高度更多，文本被压低了。

如果我们把img高度降低到低于线的高度（比如说10px），我们可以看到，即使是img + span它也会被调整到中间。

---

情况2 – img 标签有 vertical-align: middle

在这种情况下， td上的vertical-align也与第1种情况相同。但是，这种情况下的文本接近中间，因为img也与行middlealignment。

 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.comhttp://img.dovov.comfavicon.png' /> </td> <td> <img src='http://static.jsbin.comhttp://img.dovov.comfavicon.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.comhttp://img.dovov.comfavicon.png' /> <span>Image + Span</span> </td> <td> Case 1 <img src='http://static.jsbin.comhttp://img.dovov.comfavicon.png' /> <span>Image + Span</span> </td> </tr> <tr class='four'> <td> Case 2 <img src='http://static.jsbin.comhttp://img.dovov.comfavicon.png' /> <span>Image + Span</span> </td> <td> <img src='http://static.jsbin.comhttp://img.dovov.comfavicon.png' /> <span>Image + Span + more text.......</span> </td> </tr> <tr class='five'> <td> Case 3 <img src='http://static.jsbin.comhttp://img.dovov.comfavicon.png' /> <img src='http://static.jsbin.comhttp://img.dovov.comfavicon.png' /> <span>Image + Span text...</span> </td> <td> <img src='http://static.jsbin.comhttp://img.dovov.comfavicon.png' /> <span>Image + Span + more text.......</span> </td> </tr> </table> 

Answer 6

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

Answer 7

你是这个意思吗？ http://jsfiddle.net/JFVNq/

原因是跨度被视为内联，所以你需要使他们阻止。

CSS的跨度：

 td.vert span { vertical-align: middle; display: block; } 

Answer 8

DEMO

只需添加这个类：

 td *{ vertical-align:middle } 

编辑：

问题是为什么当你添加一个图片的td文本去图片的底部，而不是任何更多的TD的中间。

这是我的答案：

当你把td vertical-align到middle ，不应该把所有的内容都vertical-align到middle ，它们仍然是baseline 。 当你添加一个图片到文字，线条高度上升到图像的高度，文字是这个高度的底部，所以你需要设置vertical-align到middle来解决这个问题。

在这里你可以看到我说的： DEMO

抱歉我的英文不好

Answer 9

我想我们都快到了，但是

 td img, td span { display:inline-block; vertical-align:middle; } 

似乎工作。

Codepen示例

还是我错过了什么？

Answer 10

这个CSS属性不适用于任何其他types的元素 。 当新手开发人员对正常的块元素（如标准）应用垂直alignment时，大多数浏览器将该值设置为inheritance该元素的所有内联子元素。

你只需要在<img>类vertical-align: middle添加vertical-align: middle 。

你的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; } 

您可以查看样品提琴 …

Answer 11

只需将您的垂直alignment：从跨度移动到图像。

图像将自己对准文本; 比相反的工作更好;）

 img { height:43px;width:43px; vertical-align:middle; } 

http://jsfiddle.net/ZnpNF/1/