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

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

---

부트 스트랩 프레임 워크 아래의 버튼 내에서 글꼴 멋진 아이콘을 텍스트와 수직으로 정렬하는 데 문제가 있습니다. 줄 높이 설정을 포함하여 많은 것을 시도했지만 아무것도 작동하지 않습니다.

<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/

이 작업을 수행하려면 어떻게해야합니까?

---

에 의해 설정된 하나의 규칙이 있으며 font-awesome.css이를 재정의해야합니다.

인라인이 아닌 CSS 파일에 재정의를 설정해야하지만 기본적으로 icon-ok 클래스가 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비해 너무 크게 느껴지 40px지만 이것은 순전히 개인적인 관점입니다. 필요한 경우 보정하기 위해 버튼의 패딩을 늘릴 수 있습니다.

<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/ 결과는 다음과 같습니다.

---

또는 부트 스트랩을 사용하는 경우 align-middle요소를 수직 정렬에 추가 할 수 있습니다 .

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

---

버튼 레이블을 추가 범위로 ​​감싸고 class="align-middle"둘 다 (아이콘 및 레이블)에 추가 하기 만하면 됩니다. 그러면 아이콘이 텍스트 세로로 가운데에 배치됩니다.

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

참조 URL : https://stackoverflow.com/questions/17478710/vertical-alignment-of-text-and-icon-in-button