如何在div容器中居中这个图像？

Question

以下是代码：jsfiddle.net/Trebal/8kUyx/2

图像应垂直居中。

有人可能知道如何实现这个吗？

Answer 1

编辑垂直：

HTML解决方案：

http://jsfiddle.net/8kUyx/21/

鉴于您的.topbar是图片的设定高度是设定的高度，您可以使用padding-top: 6.5px将图像水平居中。

CSS解决方案：

http://jsfiddle.net/8kUyx/35/

使用display: inline-block和vertical-align: middle，您可以垂直对齐.image。

Answer 2

试试这个：

.topbar {
width: 100%;
height: 35px;
background: #04091f;
line-height: 35px;
z-index: 5;
position: relative;
margin: 0 auto;`
}

Answer 3

你可以使用margin-right：auto和margin-left：auto并摆脱浮动：left。

.image {
   background: url(http://img2.wikia.nocookie.net/__cb20080120194739/wowwiki/images/a/a7/Icon-wowinsider-22x22.png) no-repeat;
   width: 35px;
   height: 35px;
   margin-left: auto;
   margin-right: auto;
}

Answer 4

答案是：http://jsfiddle.net/8kUyx/8/

您应该像这样修改.image类：

.image {
    background: url(http://img2.wikia.nocookie.net/__cb20080120194739/wowwiki/images/a/a7/Icon-wowinsider-22x22.png) no-repeat;
    width: 35px;
    height: 35px;
    margin: 0 auto;
}