Выравнивать центр текста к центру изображения

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 к элементам после гарантировать, что не все они слиплись.