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

8 浏览
0 Comments

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

我有一个简单的带有1个具有“vertical-align:middle;”的“TD”的表格。这个“TD”包含一个图像：\n

table {
  border:solid 1px red;
  width:300px;
}
td {
  height:100px;
  vertical-align:middle;
  width:100%;
  border:solid 1px green;
}
img {
  height:43px;
  width:43px;
}
span {
  vertical-align:middle;
}

\n



  
    
    JS Bin

\n一切都很好，图像是垂直对齐的。\n但是，如果我在图像后面添加另一个元素（例如一个“span”）：\n

table {
  border:solid 1px red;
  width:300px;
}
td {
  height:100px;
  vertical-align:middle;
  width:100%;
  border:solid 1px green;
}
img {
  height:43px;
  width:43px;
}
span {
  vertical-align:middle;
}

\n



  
    
    JS Bin
  
  
    

      

        
          
          aaa

\n问题：\n难道“TD”的垂直对齐不应该垂直对齐其所有子元素吗？\n如何使“span”也居中对齐？\n注：\n我不想添加另一个“TD”，也不想使用带有填充/边距的“float”。仅支持IE8+。\n

编辑：

\n期望结果：\n![enter image description here](https://i.stack.imgur.com/VxAfV.png)

0

3 答案

0 Comments

问题的出现原因：在给定的代码中，希望将所有元素垂直居中对齐，但是在实际显示中，元素并不垂直居中。

解决方法：将CSS代码中的vertical-align: middle;属性应用到<img>标签上。

以下是整理后的文章：

在给定的代码中，希望将所有元素垂直居中对齐，但是在实际显示中，元素并不垂直居中。

解决方法是将CSS代码中的vertical-align: middle;属性应用到<img>标签上。

下面是提供的解决方案的JS Fiddle链接：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;
}

希望以上解决方案能够帮助到大家。感谢所有提供解答的用户，并希望能够给出详细的解释和原因。

0
0 Comments

问题的出现原因是，当在一个

元素中有一个和一个时，浏览器无法确定是inline还是inline-block。因此，需要设置display属性为inline或inline-block，然后才能使用vertical-align属性来使所有内容垂直居中。

解决方法是，在CSS中为和设置display: inline; vertical-align: middle;属性。

下面是解决方法的完整代码示例：




  

    
      
      This is a span

你可以在这个链接中查看运行结果。

问题的原因是，元素是一个替换元素(replaced element)，它的外观和尺寸由外部资源定义。替换元素可以有内在的尺寸，也可以有在CSS之外控制的视觉格式要求。在内联格式上下文中，替换元素可以被看作是一个用于换行和布局的单个大字符。

因此，为了使

元素中的所有子元素垂直居中，需要设置display属性为inline或inline-block，以便正确应用vertical-align属性。

希望这个解释能够解决你的问题。

0
0 Comments

问题：为什么在应用vertical align到td元素时，它只对td本身生效，而不会继承给子元素？

回答：当你将vertical-align应用到td元素时，它仅应用于td本身，并不会被其子元素继承。

如果td中只有一个span元素，它会垂直居中；如果td中只有一个img元素，它也会垂直居中。

这是因为td元素的vertical-align属性工作方式。td元素的总高度被计算，并且整个单元格会垂直居中对齐。

如果只有一个img元素，那么td元素的高度与img元素相同，所以看起来img元素的vertical-align也是middle。但实际上，td元素是以img元素为基线进行垂直居中对齐的。

当只有一个span元素时情况也是一样的。

但是，如果td中同时有img和span元素，它们就不会垂直居中。这是因为此时td元素的高度是img和span元素高度的总和。所以，实际上td元素是垂直居中的，但img和span元素并不是。

要使span元素也居中，需要应用以下CSS代码：

td > * {

vertical-align: middle;

}

这将把CSS应用于所有子元素。

希望这回答了你的问题。

你是说在我的第一张图片中，img元素是以基线对齐的吗？根据这个，如果我有两个不同的jsfiddle，一个是img元素，一个是span元素，它们应该在对齐方面重叠...

是的，img元素是以基线对齐的。你可以检查img元素的vertical-align属性；）

好吧，它既不是基线对齐：i.stack.imgur.com/E0LmR.png

查看我的JSFiddle。你可以通过jQuery查看CSS属性。

至于你的图片，确保你已经重置了所有的margin和padding。在我的看来很好。

我都快疯了...为什么这个文本没有对齐？jsbin.com/AlapaNI/24/edit

这是与基于webkit的浏览器有关的一些奇怪问题。在Firefox中尝试一下。查看这个线程。

你也可以使用Bootstrap的align-middle类，来写vertical-align: middle属性。

0