html - Span 和 img 标签作为 div 的垂直中心

Question

我有 div 标签，在他里面是 span 和 img 标签，我希望 span 和 img 将作为 div 的垂直中心，我正在调整这一点，但 span 标签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/

在这里我们可以使用 line-height 和 height

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

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

http://jsbin.com/apawag/1/

Answer 2

Span 默认是内联元素，所以边距不影响它。

要解决此问题，请添加display:block或display:inline-block跨越。

但我个人认为这不是最好的方法。这是一些有6种方法的文章。

6种使用CSS垂直居中的方法

Answer 3

为 img 类添加垂直对齐：中间。

vertical-align:middle;

在这里试试

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