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/apawog/1/