2

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

在以下示例中，我需要“123 描述”与“单元格一”齐平。此外，默认情况下，图像和“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>
4

4 回答 4

5

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

td img { vertical-align: top; }

这里有一个很好的 CSS vertical-align 总结。

要删除空间...删除空间：

<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-09T17:51:22.270 回答
0

要将图像与单元格对齐，请尝试将图像作为背景图像放入 css 规则中。然后使用 background-position 调整背景的 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-09T17:55:31.303 回答
0 
<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-09T18:10:45.663 回答
-1

你试过经典vertical-align:middle吗？否则将图像放在它自己的单元格中或将对齐保留为默认值并更改所有单元格的 padding-bottom 也会给你同样的东西。

于 2010-06-09T17:51:08.057 回答