Bootstrap 버튼의 Font Awesome 아이콘으로 텍스트를 수직으로 정렬하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Bootstrap 버튼의 Font Awesome 아이콘으로 텍스트를 수직으로 정렬하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-12-09 03:13:13

원래의

263명이 탐색했습니다.

How to Vertically Align Text with Font Awesome Icons in Bootstrap Buttons?

Font Awesome 아이콘과 텍스트의 세로 정렬

Font Awesome 아이콘과 Bootstrap 버튼의 텍스트를 결합할 때 텍스트를 세로로 정렬하는 것이 어려울 수 있습니다. . 일반적으로 텍스트는 아이콘의 아래쪽 가장자리에 맞춰 정렬됩니다.

세로 텍스트 정렬을 얻으려면 텍스트 대신 Font Awesome 아이콘의 세로 정렬을 수정하세요.

<div>
  <span class="icon icon-2x icon-camera">

로그인 후 복사

또는, 아이콘과 텍스트를 개별 범위로 분리하고 CSS로 타겟팅할 수 있습니다.

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

로그인 후 복사

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

로그인 후 복사

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