html - 对齐 img 和 span

Question

请检查以下链接:

http://example.com/1/23.php

在这里，我试图对齐跨度文本，例如消息和照片，以便它应该出现在图标的中间。

任何帮助都会非常有用

代码如下:

<div style="padding-left:20px">
<img src="icons/trophy1.png" > <span style="display:inline-block;padding-   bottom:5px;"> Messages</span>
<br>
<img src="icons/trophy1.png" > <span style="display:inline-block;padding-bottom:5px">Photos</span>
</div>

Answer 1

您可以通过将图标设置为跨度的背景并将 line-height 更改为图标的高度来实现此目的。

span.trophy {
    background: url(icons/trophy1.png) no-repeat 5px 3px;    
    height: 32px;
    text-indent: 30px;
    line-height: 32px;    
}