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

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，以确保它们不会全部粘在一起。