텍스트 중앙을 이미지의 중심에 맞 춥니 다.

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

img하거나 vertical-align:middle; 추가 순간, 텍스트는 기본적으로 각 이미지의 하단에 정렬 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을 추가해야합니다.