跨度和img標記爲div的垂直中心

Question

我有div標記，在他是跨度和img標記，我希望跨度和img將作爲div的垂直中心，我正在修整此標記但對於跨度標記margin-top不起作用而且我無法集中span標籤。什麼是解決方案？

<div> 
    <span> 
     some text 
    </span> 
    <img src="..." /> 
</div> 

CSS：

div { 
    width: 200px; 
    height: 40px; 
    background: #ccc 
} 

span { 
    margin-top: -10px; 
} 

img { 
    width:20px; 
    height: 20px; 
    margin-top: 10px; 
} 

這是演示http://jsfiddle.net/Q9utY/4/

Answer 1

與填充

div { 
    width: 200px; 
    padding: 20px; 
    background: #ccc 
} 


img { 
    width:20px; 
    height: 20px; 
    vertical-align: middle; 
} 

http://jsbin.com/isijop/1/

試試這個，在這裏我們CA氮利用行高與高度

div { 
    width: 200px; 
    height: 40px; 
    line-height: 40px; 
    background: #ccc 
} 

img { 
    width:20px; 
    height: 20px; 
    vertical-align: middle; 
} 

http://jsbin.com/apawog/1/

Answer 2

添加垂直對齊：中間爲IMG類。

vertical-align:middle; 

嘗試這裏

http://jsfiddle.net/Q9utY/4/

Answer 3

跨度是默認行內元素，所以利潤率並不影響它。

要解決此問題，請添加display:block或display:inline-block以跨度。

但我個人認爲這不是最好的方法。這裏有一些有6種方式的文章。

6 Methods For Vertical Centering With CSS