Twitter Bootstrap에서 요소를 중앙에 어떻게 배치합니까?

Twitter Bootstrap에서 요소 중앙에 배치

Twitter Bootstrap을 사용하여 작업할 때 상위 컨테이너 내의 요소를 중앙에 배치해야 할 필요성이 발생합니다. 사용할 수 있는 방법은 다음과 같습니다.

가로 중심 맞추기:

1. text-center 클래스: 모든 하위 요소를 가로로 정렬하려면 상위 컨테이너의 text-center 클래스를 사용하세요.

2. 인라인 스타일 지정: 중앙에 배치하려는 상위 컨테이너 또는 하위 요소에 text-align: center CSS 속성을 설정합니다.

3. 오프셋(새로운 방법): Bootstrap 4에 도입된 mx-auto 클래스는 요소에 수평 여백을 추가하여 요소가 중앙에 배치되도록 합니다.

수직 센터링:

1. padding-top 및 padding-bottom: 상위 컨테이너의 padding-top 및 padding-bottom 속성을 사용하여 세로 간격을 추가하고 하위 요소를 중앙에 배치합니다.

2. 절대 위치 지정: 하위 요소를 절대 위치로 지정하고 상단을 50%로 설정합니다. 변환: 번역(-50%, -50%).

참고: 위의 솔루션은 이전 버전의 Bootstrap에 적용 가능합니다. Bootstrap 4 이상의 경우 mx-auto 클래스는 수평 중앙 정렬에 권장되는 접근 방식입니다.

위 내용은 Twitter Bootstrap에서 요소를 중앙에 어떻게 배치합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!