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

Lig*_*ard 2 css vertical-alignment

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

在下面的示例中,我需要"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>
Run Code Online (Sandbox Code Playgroud)

And*_*rew 5

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

td img { vertical-align: top; }
Run Code Online (Sandbox Code Playgroud)

有CSS垂直对齐的一个很好的总结在这里.

删除空格...删除空格:

<img src="http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png" /><span class="adjust-text">123 Description</span>
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/s38Uv/