[Bootstrap] Horizontal alignment(text-center, d-flex, justify-content)

text-center

텍스트를 중앙에 배치하려면 상위요소에 .text-center 클래스를 추가한다.

<div class="text-center">
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae nihil hic
    delectus excepturi ipsam reprehenderit iusto rem, quam, repellendus accusantium culpa
    reiciendis sit dolorum aut aperiam a architecto. Fuga, sit.
  </p>
</div>

 

이미지의 상위 요소에 .text-center 클래스를 추가하여 이미지를 중앙에 배치할 수도 있다.

<div class="text-center">
  <img src="images/logo.jpg" class="img-fluid" alt="로고" />
</div>

 

버튼의 부모 요소에 .text-center를 추가하면 버튼도 중앙에 배치한다.

<div class="text-center">
  <button type="button" class="btn btn-primary">Primary</button>
</div>

 

flexbox를 사용하면 그리드의 전체 열을 중앙에 배치할 수 있다.

<!--Grid row-->
<div class="row d-flex justify-content-center">
  <!--Grid column-->
  <div class="col-md-6">
    This column is centered
  </div>
  <!--Grid column-->
</div>
<!--Grid row-->

 

justify-content

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

justify-content에 대한 반응형 변형

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-evenly
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-sm-evenly
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-md-evenly
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-lg-evenly
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around
• .justify-content-xl-evenly
• .justify-content-xxl-start
• .justify-content-xxl-end
• .justify-content-xxl-center
• .justify-content-xxl-between
• .justify-content-xxl-around
• .justify-content-xxl-evenly