编辑：

Question

我有一个简单的table，其中TD为vertical-align:middle; TD。此Image包含<table> <tr> <td> <img src='http://static.jsbin.com/images/favicon.png'/> </td> </tr> </table>：

IMG

enter image description here

一切都很好，span是垂直对齐的。

但是如果我在该图片之后添加其他元素（例如<td> <img src='http://static.jsbin.com/images/favicon.png'/> <span>aaa</span> </td>）：

span

结果是：

enter image description here

问题

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

如何让TD集中以及？

Full JSBIN

NB

我不想添加其他float，也不想使用带有填充/边距的{{1}}。 IE8 +。

编辑：

期望的结果：

enter image description here

Answer 1

<强>问题
TD的垂直对齐不应该垂直对齐所有孩子吗？

否即可。
当您将vertical-align应用于td时，它仅适用于td，并且未被其任何子项继承。

如果我的TD只有跨度 - 它会垂直对齐。如果我的TD内部只有IMG，它也会对齐。

这是因为vertical-align的{{1}}工作方式。计算单元格的总高度，即td，整个单元格垂直对齐。

如果只有一个td，则img的高度与td的高度相同，因此似乎 img vertical-align的{{1}}也是img。但实际上，middle垂直对齐中间，td为img

当存在单个vertical-align : baseline时也是如此。

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

现在，span的{{1}}是height + td的合并height。实际上，img实际上是在中间垂直对齐，但不是span和td。

如何使跨度居中？

您需要应用此CSS：

img

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

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

希望，这可以回答你的问题。

Answer 2

您可以使用vertical-align: middle;到您的范围

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

span
{
  vertical-align:middle;
  display: inline;

}

your jsbin

根据评论

您可能会认为td被赋予vertical-align: middle;然后它应该对齐其中的所有内容但是有一个图像和一个浏览器理解图像的范围是什么？：是这个内联块还是内联块，所以你需要设置display：inline或inline-block;然后你可能会看到它只适用于图像的显示属性。 demo

修改

img tag：来源：display inline vs inline-block

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

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

Also check this:

替换元素


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

替换元素可以具有由元素本身定义的内部维度 - 宽度和高度值，而不是文档中的周围环境。例如，如果图像元素的宽度设置为auto，则将使用链接图像文件的宽度。内在维度还定义了一个内在比率，用于确定元素的计算维度，只应指定一个维度。例如，如果仅为图像元素指定宽度，例如100px，并且实际图像宽200像素，高100像素，则元素的高度将按相同的量缩放到50px。 / p>
替换元素也可以具有元素强加的视觉格式要求，不受CSS控制;例如，为表单元素呈现的用户界面控件。

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

Answer 3

这是一个JS小提琴解决方案

fiddle

这是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;上的td执行预期的操作。也就是说，将td与该行的中心对齐，将td的全部内容与垂直中间对齐（默认情况下），在顶部和底部留出相等的空格。

以下是W3 Spec所说的 vertical-align: middle：

细胞的中心与其跨越的行的中心对齐。

行高计算：

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

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

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

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

道明只有图片：

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

enter image description here

从上图中可以看出，这显然不需要vertical-align: middle img，因为td将其内容与中间对齐。

道明只有内嵌数据：

当td只有span或span加上内联div时，内容的高度等于文本的默认line-height （或任何指定的line-height）。在这种情况下，td也正确对齐。

enter image description here

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

TD有图片和跨度：

当我们在img中放置span和td（内联文字）时，内容高度等于img加line-height的高度第二行和后续行的1}}。

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

案例1 - img 标记没有 vertical-align 指定

在这种情况下，img与baseline对齐（默认）。然后td将整个内容对齐到中间。这意味着td在内容的顶部和底部留下 28.5px（=（100-43）/ 2）间隙。同样，vertical-align td完成工作，它将内容放在中间（即在顶部和底部留下相同的间隙）。但是由于img高度更高，文本被推下来了。

enter image description here

如果我们将img高度降低到小于行高（比如10px），我们可以看到，即使img + span，它也会与中间对齐。

案例2 - img 标记 vertical-align: middle

在这种情况下，vertical-align上的td也与案例1中的内容相同。但是，本案例中的文字为near the middle，因为img也与行的middle对齐。

enter image description here

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>

Answer 5

只需将vertical-align:middle;添加到您的img样式中吗？

Demo

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 vertical-align设置为middle时，不应将所有内容vertical-align设置为middle，它们仍为baseline。当您向文本添加图片时，线条高度上升到图像的高度，文字位于此高度的底部，因此您需要将vertical-align设置为middle以解决此问题。

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

抱歉我的英文不好

Answer 9

我认为我们几乎都在那里但是

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

似乎有效。

Codepen Example

或者我错过了什么？

Answer 10

此 CSS属性不适用于任何其他类型的元素。当新手开发人员将vertical-align应用于普通块元素（如标准）时，大多数浏览器都会将值设置为继承给该元素的所有内联子元素。

您只需将vertical-align: middle添加到<img>课程即可。

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

您可以查看 Sample Fiddle ...

Answer 11

只需将您的vertical-align：middle从span移动到图像。

图像将在文本上对齐;效果比对面好;）

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

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

垂直对齐TD中的所有（！）元素？

编辑：

11 个答案:

编辑：