gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 10:58:02 25 4
gpt4 key购买 nike

当我在表格单元格中放置图像后跟文本时,与相邻单元格中的文本相比,文本的垂直对齐方式向下移动。我尝试使用 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>

最佳答案

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

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/

关于css - 表格单元格中文本的垂直定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3008348/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com