Bootstrap 버튼에서 텍스트와 멋진 글꼴 아이콘을 수직 중앙에 배치하는 방법은 무엇입니까?

Font-Awesome 아이콘이 있는 버튼의 세로 텍스트 정렬

텍스트와 함께 부트스트랩 버튼에 큰 Font-Awesome 아이콘을 통합하면 텍스트가 아이콘의 아래쪽 가장자리에 정렬되는 경향이 있어 시각적으로 균형이 맞지 않습니다.

해결책

텍스트를 수직 중앙에 맞추려면 텍스트보다는 아이콘 정렬에 집중하세요. 이를 달성하는 방법은 다음과 같습니다.

• 텍스트의 수직 정렬을 변경하지 마세요.
• CSS를 사용하여 Font-Awesome 아이콘의 수직 정렬 속성을 "가운데"로 설정하세요. "

예 코드

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

대체 접근 방식

더 많은 사용자 정의를 위해서는 icon-2x 클래스를 피하고 글꼴 크기를 수동으로 지정하는 것이 좋습니다. 예는 다음과 같습니다.

<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;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

결론

텍스트 대신 Font-Awesome 아이콘의 세로 정렬을 조정하면 텍스트를 효과적으로 중앙에 배치할 수 있습니다. 아이콘 옆 버튼에 세로로 텍스트가 표시됩니다. 이 접근 방식은 버튼 콘텐츠의 모양을 제어하는 ​​데 있어 더 큰 사용자 정의 및 유연성을 제공합니다.

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