Question

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

在以下示例中，我需要“123 Description”与“cell one”齐平。此外，默认情况下，图像与“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>

Answer 1

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

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/

Answer 2

要将图像与单元格对齐，请尝试将图像作为背景图像放在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>

Answer 3

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

Answer 4

您是否尝试过经典vertical-align:middle？否则将图像放在自己的单元格中或默认保留对齐方式，更改所有单元格的填充底部也会给你相同的东西。

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

4 个答案: