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