css - 在 div 中垂直居中图标和文本

Question

我想使用此 CSS 代码将图像及其标题置于 div 的中心

.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
}

.titleIkon{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}

通过这个 fiddle 的外观 http://jsfiddle.net/7kx4r/我看不出图标或文本是否居中。我该如何解决这个问题？

Answer 1

删除不必要的 CSS 并使用以下 CSS:

.title {background-color:pink;color:white; padding:10px; }
.titleIkon{
    margin-right:2%;
    display:inline;
}

DEMO