文本在表格单元格中的垂直定位

问题描述：

当我在表格单元格中放置图像后跟文本时，文本的垂直对齐与相邻单元格中的文本相比向下移动。我尝试使用一个line-height CSS属性，但它似乎没有影响。文本在表格单元格中的垂直定位

在以下示例中，我需要“123说明”与“单元格1”齐平。此外，默认情况下图像和“123”之间有空格。我怎样才能调整 - 也许是负利润率？

<html> 
<head> 
    <style type="text/css"> 
     table { border-collapse: collapse; } 
     td { border: thin solid; width: 10em;} 
     /* .adjust-text { line-height: 1.3em; } */ 
    </style> 
</head> 
<body> 
    <table> 
     <tbody> 
      <tr> 
       <td>cell one</td> 
       <td> 
        <img src="small-star.png" /> 
        <span class="adjust-text">123 Description</span> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

没有任何这些解决方案为你工作罗伯特？ – Andrew 2010-06-11 13:28:07

答

默认情况下，图像与文本的基线对齐，实际上将该单元格中的文本向下推。为了解决这个问题，请指定：

td img { vertical-align: top; }

这里有一个关于CSS vertical-align here的好摘要。

要删除的空间...删除空格：

<img src="http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png" /><span class="adjust-text">123 Description</span>

http://jsfiddle.net/s38Uv/

注意：这也适用于当你使用display：table-cell ;在一个div上。 – 2013-08-22 08:33:38

答

您是否尝试过经典vertical-align:middle？否则将图像放在它自己的单元格中或者在默认情况下保持对齐状态，并且更改所有单元格的填充底部也会给你同样的东西。

这是行不通的，看看他的例子如何呈现，看看他在说什么。 – Andrew 2010-06-09 17:52:16

恩，是啊。我没有看到任何地方的链接可以看到它如何呈现。你在哪里得到了他的形象的完整路径，我不知道... – edl 2010-06-09 17:56:01

他在他原来的职位：http://jsfiddle.net/s38Uv/ – Andrew 2010-06-09 17:58:40

答

与细胞排列你的形象，尝试把图像中的CSS规则作为背景图像。然后使用背景位置调整背景的y位置。在元素的左侧添加填充以在图像右侧显示文本。


     table { border-collapse: collapse; } 
     td { border: thin solid; width: 10em;} 
     .image { 
      background-image:url('http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png'); 
      background-position: 0 -2px; 
      padding-left:20px; 
     }


<span class="image">123 Description</span>

答

<html> 
<head> 
<style type="text/css"> 
    table { border-collapse: collapse; } 
    td { border: thin solid; width: 10em;} 
    td { vertical-align: baseline;} 
    td img { vertical-align: middle;} 
</style> 
</head> 
<body> 
<table> 
    <tbody> 
     <tr> 
      <td>cell one</td> 
      <td> 
       <img src="small-star.png" /> 
       <span style="margin: 0 0 0 -5;">123 Description</span> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html>

文本在表格单元格中的垂直定位

相关推荐