Twitter Bootstrap에서 요소를 가로 및 세로 가운데에 배치하는 방법은 무엇입니까?

Twitter Bootstrap의 요소 중앙 정렬에 대한 종합 가이드

Twitter Bootstrap을 사용하여 작업할 때 상위 컨테이너 내에서 요소를 수직 또는 수평으로 중앙에 배치해야 합니다. 자주 발생합니다. 이 다목적 프레임워크는 이러한 정렬을 달성하기 위한 다양한 접근 방식을 제공합니다.

수평 중심화

1. text-center 클래스: text-center 적용 클래스를 상위 컨테이너에 추가하여 내용을 수평으로 가운데에 배치합니다. 이는 텍스트 요소와 텍스트가 아닌 요소 모두에 대해 간단하고 효과적인 방법입니다.
2. mx-auto 클래스: 더 많은 유연성이 필요하고 센터링을 오프셋하려면 mx-auto를 사용하세요. 수업. 요소의 왼쪽과 오른쪽에 자동 여백을 추가하여 중앙으로 밀어넣습니다.

수직 센터링

부트스트랩은 기본 제공되는 여백을 제공하지 않습니다. 수직 센터링을 위한 유틸리티. 그러나 두 가지 일반적인 기술이 있습니다.

1. 페이지 매김 중심 클래스: 페이지 매김 컨트롤을 사용하여 컨테이너 내의 단일 요소를 세로로 가운데에 맞추려면 페이지 매김에 페이지 매김 중심 클래스를 적용합니다. 래퍼를 제어합니다.
2. 사용자 정의 CSS: 또한 사용자 정의 CSS를 사용하여 세로 중앙에 배치할 수도 있습니다. 요소. 예를 들어, 중앙에 배치하려는 요소에 margin-top: auto 및 margin-bottom: auto 속성을 설정합니다.

참고:

텍스트 -center 및 pagination 중심 클래스는 최신 버전의 Bootstrap에서 더 이상 사용되지 않습니다. 대신 mx-auto 및 d-flex 유틸리티를 사용하는 것이 좋습니다.

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