Twitter Bootstrap에서 콘텐츠를 중앙에 배치하는 방법은 무엇입니까?

Twitter Bootstrap을 사용하여 콘텐츠를 중앙에 배치하는 방법

Twitter Bootstrap에서는 특정 요구 사항에 따라 다양한 방법을 통해 콘텐츠를 중앙에 배치할 수 있습니다.

텍스트 중앙 정렬

다음으로 텍스트를 중앙에 정렬하려면 .text-center 클래스를 상위 컨테이너에 적용할 수 있습니다. Bootstrap 2.3.0에 도입된 이 클래스를 사용하면 텍스트를 손쉽게 가운데 정렬할 수 있습니다.

<div class="text-center">
  <h1>Bootstrap Starter Template</h1>
  <p>Example text.</p>
</div>

참고:

• 이전 버전의 텍스트 정렬 옵션 부트스트랩(2.3.0 이전), .row 또는 .span12에 text-align: center를 추가할 수 있습니다. 컨테이너.

텍스트가 아닌 콘텐츠를 위한 대체 방법

텍스트가 아닌 요소(예: 이미지 또는 버튼)를 중앙에 배치하는 데 다음과 같은 옵션이 있습니다.

• 여백: 여백 추가: 0 자동 양쪽에 동일한 여백을 생성하는 요소에 추가합니다.
• Float: float: none을 설정한 다음 상위 컨테이너에 margin: 0 auto를 추가합니다.
• 부트스트랩 유틸리티 클래스: .pull-left, .pull-right 및 .center-block 활용
• 사용자 정의 스타일: 자신만의 사용자 정의 스타일시트에서 중심 규칙을 정의하세요.

특정 요구사항과 Bootstrap 버전에 가장 적합한 방법을 선택하세요.

위 내용은 Twitter Bootstrap에서 콘텐츠를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!