對齊IMG和跨度

請檢查下面的鏈接：對齊IMG和跨度

在這裏，我想對齊跨度文本如消息和照片，使得它應該出現在中間WRT的圖標。

任何幫助將是非常有用的

下面是代碼：

<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>

來源

2016-02-13 Deva

您能插入您當前使用的代碼嗎？ –

@RobinV。：我已經用我的代碼 – Deva

你可以通過設置圖標，跨度的背景下實現這一目標，改變line-height到你的圖標的高度。

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

來源

2016-02-13 18:30:23

謝謝了隊友，提出了我的問題。它的工作:) – Deva

不客氣。 –

您可以使用DIV元素來實現此目的。

您應該在容器上使用CSS文本對齊屬性。

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

來源

2016-02-13 18:37:15 Liadco

文字不會以這種方式與圖標垂直居中。圖像和跨度將在div元素內水平居中 –

對齊IMG和跨度

回答

相關問題