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

當我在表格單元格中放置圖像後跟文本時，文本的垂直對齊與相鄰單元格中的文本相比向下移動。我嘗試使用一個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>

來源

2010-06-09 Lightbeard

沒有任何這些解決方案爲你工作羅伯特？ – 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/

來源

2010-06-09 17:51:22 Andrew

注意：這也適用於當你使用display：table-cell ;在一個div上。 – 2013-08-22 08:33:38

-1

您是否嘗試過經典vertical-align:middle？否則將圖像放在它自己的單元格中或者在默認情況下保持對齊狀態，並且更改所有單元格的填充底部也會給你同樣的東西。

來源

2010-06-09 17:51:08 edl

這是行不通的，看看他的例子如何呈現，看看他在說什麼。 – 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>

來源

2010-06-09 17:55:31 Calvin

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

來源

2010-06-09 18:10:45 Chinjoo

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

回答

相關問題