使文本垂直居中显示在图像旁边

Question

我有这个CSS，我用它来显示某些文字左侧的DIV：

#type_box {
    width:30px;
    height:30px;
    margin-right:10px;
    border-radius:20px;
    float:left;
    display:inline;
}
.box_okay {
    background:url(http://s29.postimg.org/gjnuph0gz/tick.png) no-repeat;
    background-size: contain;
}

我希望文本完全位于图像的垂直中心（图像显示在文本的左侧）

http://jsfiddle.net/P3CFU/

Answer 1

将文字放入span并使用line-height使其垂直对齐。

span
{
    line-height:30px;
}

Js Fiddle Demo

Answer 2

您始终可以使用vertical-align。在一个范围中包装您的文本，并使用图像和跨度设置div样式：

#type_box {
    width:30px;
    height:30px;
    margin-right:10px;
    border-radius:20px;
    display:inline-block;
    vertical-align:middle;
}
.box_okay {
    background:url(http://s29.postimg.org/gjnuph0gz/tick.png) no-repeat;
    background-size: contain;
}

span.center{
    display:inline-block;
    vertical-align:middle;
}

http://jsfiddle.net/CZ5Pq/

这样，如果您决定更改任一元素的大小，则不必重新修改边距，填充，相对定位等。