Question

我有div标签，在他身上是span和img标签，我希望那个跨度和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/

这里我们可以使用高度为

的行高

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

Span是默认的内联元素，因此margin不会影响它。

要解决此问题，请将display:block或display:inline-block添加到span。

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

6 Methods For Vertical Centering With CSS

Answer 3

为img class添加vertical-align：middle。

vertical-align:middle;

试试这里

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

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

3 个答案: