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

Question

I have some simple social media images, and I need the text to be in line with the center of each image. At the moment, the text is aligned to the bottom of each image, by default:

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

Add vertical-align:middle; to img or 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

You should add a margin to the elements after to ensure that they're not all stuck together.