垂直对齐TD中的所有(!)元素？

Question

我有一个简单的table1 TD用 vertical-align:middle;.这TD包含Image:

<table>
<tr>
    <td>
        <img src='http://static.jsbin.com/images/favicon.png'/>
    </td>
</tr>
</table>

一切都很好,IMG垂直对齐.

但是如果我在该Image之后添加另一个元素(span例如):

  <td>
    <img src='http://static.jsbin.com/images/favicon.png'/>
    <span>aaa</span>
  </td>

结果是:

题

TD的垂直对齐是否应垂直对齐所有孩子？

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

完整的JSBIN

NB

我不想添加另一个TD,也不想使用float填充/边距.IE8 +.

编辑:

期望的结果:

Answer 1

问题
TD的垂直对齐是否应垂直对齐所有孩子？

不.
申请vertical-align时td,它仅适用于td,并且不会被其任何子项继承.

如果我有一个只有跨度的TD - 它将垂直对齐.如果我有一个只有IMG的TD - 它也会对齐.

这是因为这样vertical-align的td作品.td计算单元的总高度,并且整个单元垂直对齐.

如果有一个单一img的,那么高度td是一样的img,所以它看起来是vertical-align为img也middle.但实际上,td垂直对齐与中间img为vertical-align : baseline

有一个单一的情况也是如此span.

但如果我同时拥有 - 它没有.这是为什么 ？

因为现在的height的td是合并height双方的img+ span.所以,实际上,它td是在中间垂直对齐,但不是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;那么它应该对齐其中的所有内容但是有一个图像和一个浏览器理解图像的跨度是什么？:是这个内联块还是内联块,所以你需要设置display:inline或inline-block; 然后你可能会看到它只适用于图像的显示属性.演示

编辑

img标签:source:显示内联vs内联块

它们是"块"元素,因为它们具有宽度和高度.

确实,它们都是 - 或者更准确地说,它们是"内联块"元素.这意味着它们像文本一样以内联方式流动,但也具有像块元素一样的宽度和高度.

还要检查一下:

替换元素

替换元素是其外观和尺寸由外部资源定义的任何元素.示例包括图像(标签),插件(标签)和表单元素(,,和标签).所有其他元素类型可以称为非替换元素.

替换元素可以具有由元素本身定义的内部维度 - 宽度和高度值,而不是文档中的周围环境.例如,如果图像元素的宽度设置为auto,则将使用链接图像文件的宽度.内在维度还定义了一个内在比率,用于确定元素的计算维度,只应指定一个维度.例如,如果仅为图像元素指定宽度,例如100px,并且实际图像宽200像素,高100像素,则元素的高度将缩放相同的量,达到50px.

替换元素也可以具有由CSS控制之外的元素强加的视觉格式要求; 例如,为表单元素呈现的用户界面控件.

在内联格式化上下文中,您还可以将替换元素视为用于包装和布局的单个大字符.可以为替换的内联元素指定宽度和高度,在这种情况下,元素所在的线框的高度足够高以容纳替换的元素,包括任何指定的框属性.