부트 스트랩의 도우미 클래스를 중앙에 사용하는 방법

> 부트 스트랩 헬퍼 클래스와 함께 콘텐츠 중심을 중심으로 한

포괄적 인 가이드

이 기사는 다양한 화면 크기에 걸쳐 수평 및 수직으로 컨텐츠를 중심으로 부트 스트랩의 헬퍼 클래스를 사용하는 것에 대한 일반적인 질문을 다룹니다. 는 부트 스트랩의 헬퍼 클래스를 중심으로 사용합니다. 수평, 수직 또는 둘 다가 필요한지 여부. 수평 센터링의 경우 가장 간단한 접근 방식은 클래스를 사용하는 것입니다. 이 클래스는 부모 컨테이너 내의 콘텐츠 (텍스트, 이미지 등)를 중심으로합니다. 그러나 디스플레이 속성이 또는 로 설정된 인라인 요소 또는 요소에만 작동합니다. 요소가 블록 레벨 요소 (A

와 같은) 인 경우 요소 내에서 .text-center 컨텐츠 inline-block를 중심으로하지만 요소 자체는 여전히 부모의 전체 너비를 차지합니다. inline는 블록 레벨 요소를 가로로 수평으로 중앙에 묶어야합니다. 예를 들면 : <div> 이 코드는 컨테이너 너비의 50%입니다. 고정 너비 (예를 들어, )로 <em>를 교체하면 해당 너비의 DIV를 중심으로합니다. 클래스는 반응 형 컨테이너를 제공하여 다양한 화면 크기에 대한 적절한 크기를 보장합니다. 너비를 지정하지 않으면 </em>만으로는 블록 레벨 요소를 중심으로하지 않습니다. 올바르게 작동하려면 정의 된 너비가 필요합니다. 부트 스트랩 헬퍼 클래스를 사용하여 컨텐츠를 세로 센터링하는 <p> <code>.mx-auto 부트 스트랩 클래스 만있는 컨텐츠를 수직 센터링보다 수평 센터링보다 까다로울 수 있습니다. 이것을 직접 달성하는 단일 클래스는 없습니다. 최상의 접근법은 종종 컨텍스트에 따라 다릅니다.

<div class="container">
  <div class="mx-auto" style="width: 50%;">
    This div is horizontally centered.
  </div>
</div>

컨테이너 내의 단일 라인 텍스트 또는 인라인 요소의 경우 클래스는 Flexbox 컨테이너에 적용 할 때 내용을 수직으로 중심으로 할 수 있습니다. Flexbox 동작을 가능하게하기 위해 부모 컨테이너에

및 <div>를 추가해야합니다.블록 레벨 요소의 경우 <ul> <li> : <strong> Flexbox를 사용하는 것이 가장 효율적인 방법으로 남아 있습니다. 위의 예는 </strong> 또는 기타 블록 레벨 요소로 <code><span></span>를 대체하여 블록 레벨 요소에 적응할 수 있습니다. <div> 복잡한 레이아웃의 경우 : 는 여러 요소 또는보다 복잡한 레이아웃을 사용하는 경우 그리드 시스템 또는 더 고급 CSS 기술을 사용하는 것을 고려하십시오. 센터링 bootstrap은 수평 센터링을위한 여러 클래스를 제공하며, 각각 사용 사례가 있습니다. 짧은 텍스트 또는 인라인 요소에 가장 적합합니다. <li> <strong> </strong> : </li> : 왼쪽과 오른쪽 여백을 로 설정하여 수평으로 블록 레벨 요소를 중심으로합니다. 요소가 올바르게 작동하려면 정의 된 너비가 필요합니다. <h3> </h3> : <p>는 Flexbox 컨테이너 내에서 수평으로 내용을 중심으로합니다. 더 복잡한 레이아웃에 대한보다 다재다능한 옵션. </p> 클래스 선택은 요소 유형 (인라인 대 블록 레벨)과 레이아웃의 복잡성에 따라 다릅니다. <li> <strong> 부트 스트랩 헬퍼 클래스를 사용하는 데 대한 제한 사항은 반응 적으로 반응 적으로 중심으로 간단하게 중심에 있습니다. 디자인 : <code>.text-center 컨텍스트 종속성 : 일부 클래스의 효과 (예 : )는 컨텍스트 (예 : 부모 컨테이너의 치수, 요소의 너비)에 따라 다릅니다. 다양한 화면 크기에 걸쳐 센터링 동작을 미세 조정하기 위해 너비를 조정하거나 미디어 쿼리를 사용해야 할 수도 있습니다.

복잡성 : .mx-auto 여러 요소 또는 중첩 컨테이너가있는 복잡한 레이아웃의 경우 간단한 도우미 클래스로 충분하지 않을 수 있습니다. 클래스를 결합하거나 FlexBox 또는 그리드를 직접 사용하거나 사용자 정의 CS를 작성해야 할 수도 있습니다. 수직 센터링 컨텐츠 : auto 수직 센터링 콘텐츠는 더 많은 노력이 필요하며 종종 단일 수업이 아니라 Flexbox 또는 기타 레이아웃 기술을 사용하는 경우가 종종 있습니다.

BootStrap 's helper helper를 제공합니다. Flexbox와 같은 다른 레이아웃 기술과 함께 사용하면 반응이 좋고 잘 구조화 된 웹 페이지를 작성하는 데 중요합니다.