부트 스트랩 버튼의 텍스트와 아이콘의 수직 정렬

Question

부트 스트랩 프레임 워크 아래의 버튼 내 텍스트로 글꼴 굉장한 아이콘을 수직으로 정렬하는 데 문제가 있습니다. 나는 line-height를 설정하는 것을 포함하여 많은 것을 시도했지만 아무것도 작동하지 않는다.

<button id="edit-listing-form-house_Continue" 
     class="btn btn-large btn-primary" 
     style="" 
     value="" 
     name="Continue" 
     type="submit"> 
    Continue 
    <i class="icon-ok" style="font-size:40px;"></i> 
</button> 

http://jsfiddle.net/fPXFY/

어떻게이 작업을 얻을 수 있습니까 ??

Answer 1

font-awesome.css에 의해 설정되는 규칙이 하나 있는데,이를 재정의해야합니다.

당신은 오히려 인라인보다는 당신의 CSS 파일에 재 지정을 설정해야하지만, 본질적으로, 아이콘-확인 클래스는 기본적으로 vertical-align: baseline;로 설정되고 있으며, 여기 수정했습니다하는

:

<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit"> 
    <span>Continue</span> 
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i> 
</button> 

예 여기 : http://jsfiddle.net/fPXFY/4/ 과의 출력은 다음과 같습니다

가너무 큰 느낌으로 내가 30px이 인스턴스에 위의 아이콘의 글꼴 크기를 축소 한

버튼의 크기는이지만 이것은 순전히 개인적인 견해입니다. 필요한 경우는 보상하기 위해 버튼을 패딩을 증가시킬 수있다 :

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit"> 
    <span>Continue</span> 
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i> 
</button> 

생산 : http://jsfiddle.net/fPXFY/5/ 출력하는 중입니다 :