텍스트를 CSS와 세로로 정렬하십시오.

Question

파란색 상자에 텍스트를 세로로 가운데 맞춤시키는 가장 좋은 방법은 무엇입니까?

태그 :

<div class="btn-blue"> 
    <span class="icon"></span> 
    Some awesome text here 
</div> 

및 스타일 :

여기

.btn-blue { 
    background-color: #446598; 
    color: #fff; 
    display: inline-block; 
    padding: 0 20px 0 0; 
    line-height: 0; 
} 

.btn-blue .icon { 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
    background-color: #00356b; 
    margin-right: 10px; 
} 

는 바이올린 http://jsfiddle.net/fSa6r/

덕분이다.

Answer 1

.btn 블루 클래스에 line-height: 50px;를 추가하고

vertical-align: middle; 텍스트의 한 라인이 필요한 경우

FIDDLE

, 내가 설정 라인 높이 것을 알게 아이콘 클래스 상자의 높이까지 텍스트를 가운데 맞춤하는 가장 쉬운 방법입니다.

Answer 2

수직으로 여기에 체크 아웃 할 수있는 텍스트를 정렬 할 수있는 여러가지 방법이 있습니다 : http://www.vanseodesign.com/css/vertical-centering/

내 개인 좋아하는 CSS 테이블 (안 HTML 테이블) 사용 :

HTML :

<div id="parent"> 
    <div id="child">Content here</div> 
</div> 

을

CSS는 :

#parent {display: table;} 

#child { 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 3

이 링크를 표시하는 또 다른 방법입니다 아이콘이있는 버튼으로

다음

a.mybutton { 
    padding: 3px 0px 3px 30px; 
    color: #c00; 
} 

a.mybutton:link, 
a.mybutton:visited, 
a.mybutton:active { 
    background: #fff url("https://dl.dropboxusercontent.com/u/59816767/assets/map-pin_off.png") left center no-repeat; 
} 
a.mybutton:hover { background: #fff url("https://dl.dropboxusercontent.com/u/59816767/assets/map-pin_on.png") left center no-repeat; } 

은 다음과 같습니다 : 대신 두 개의 분리 된 이미지 스프라이트를 사용하여이 코드를 향상시킬 수 fiddle