调整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;    
}

Answer 2

您可以使用DIV元素来实现此目的。

您应该在容器上使用CSS text-align属性。

<div style="text-align: center;">
    <img src="icons/trophy1.png" > 
    <span style="display:inline-block;padding-bottom:5px;"> Messages</span>
</div>