垂直文本对齐图像

时间:2010-07-30 18:56:29

标签: html css html-table alignment

当我将图像内嵌在表格单元格中时,如下所示:

<table border="1" cellspacing="5" cellpadding="5">
 <tr>
  <td>
   <img width="20" height="20">Text
  </td>
  <td>
   Text
  </td>
 </tr>
</table>

...它会移动该单元格中文本的垂直对齐方式,如下所示:

我玩vertical-align,但无法对齐两个单元格。什么是正确的方法呢?

2 个答案:

答案 0 :(得分:2)

我一直在继续解决这个问题,这是我提出的解决方法:

<table border="1" cellspacing="5" cellpadding="5">
    <tr>
        <td style="line-height: 20px;">
            <img width="20" height="20" style="vertical-align: top;">Text
        </td>
        <td>
            Text
        </td>
    </tr>
</table>

它呈现如下:

我不喜欢图像的高度需要在CSS中,所以我仍然对其他想法持开放态度。

答案 1 :(得分:1)

好的......这个怎么样!

<table border="1" cellspacing="5" cellpadding="5"> 
 <tr> 
  <td> 
   <img style="float: left;" width="20" height="20">Text 
  </td> 
  <td> 
   Text 
  </td> 
 </tr> 
</table>