Bootstrap 버튼에서 Font Awesome 아이콘을 사용하여 텍스트를 세로 중앙에 배치하는 방법은 무엇입니까?

Font-Awesome 아이콘이 포함된 텍스트의 수직 중심 배치

가끔 Font Awesome 아이콘과 텍스트가 모두 통합된 Bootstrap 버튼을 사용하여 작업할 때 아이콘과 세로 방향으로 텍스트를 배치하는 것은 어려울 수 있습니다. 일반적으로 텍스트는 이 JSFiddle 예제에 설명된 것처럼 아이콘의 아래쪽 가장자리에 정렬됩니다.

이 잘못된 정렬을 수정하려면 텍스트의 수직 정렬을 수정하지 마십시오. 대신 Font Awesome 아이콘의 세로 정렬을 조정하세요.

인라인 스타일링 솔루션:

`

<i>

`

CSS 클래스 해결책:

`.icon {

vertical-align: middle;
font-size: 40px;

}

.my-text {

font-family: "Courier-new";

}

.my-fancy-container {

...

}`

대체 접근 방식:

icon-2x를 사용하는 대안은 다음과 같이 아이콘의 글꼴 크기를 수동으로 지정하는 것입니다. 다음 코드에서 보여줍니다. snippet:

`

<span>

`

이 접근 방식을 사용하면 아이콘 크기를 더 유연하게 제어할 수 있습니다. 실제 예제는 업데이트된 JSFiddle을 참조하세요.

위 내용은 Bootstrap 버튼에서 Font Awesome 아이콘을 사용하여 텍스트를 세로 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!