将文本中心与图像中心对齐

Question

我有一些简单的社交媒体图像，我需要文本与每个图像的中心对齐。 目前，默认情况下，文本与每个图像的底部对齐：

http://jsfiddle.net/uT4Ey/

CSS：

.img {
    background-color: red;
    height: 3em;
    width: 3em;
    display: inline-block;
}

HTML：

            <div class="sm">
                <div class="img"></div>
                facebook
            </div>
            <div class="sm">
                <div class="img"></div>
                instagram
            </div>
            <div class="sm">
                <div class="img"></div>
                facebook
            </div>
            <div class="sm">
                <div class="img"></div>
                isntagram
            </div>

Answer 1

添加vertical-align:middle; 到img或div 。

.img {
    background-color: red;
    height: 3em;
    width: 3em;
    display: inline-block;
    vertical-align: middle; /*CAN GO HERE*/
}

div {
    vertical-align: middle; /*OR HERE*/
}

的jsfiddle

之后，应在元素上添加margin ，以确保元素不会全部粘在一起。