[twitter-bootstrap] Bootstrap 4의 열 중앙에 콘텐츠 배치

Program / 글쓴이

문제를 해결하는 데 도움이 필요합니다. 콘텐츠를 bootstrap4의 열 중앙에 배치해야합니다. 아래에서 내 코드를 찾으십시오.

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>

답변

Bootstrap 4 에는 여러 수평 센터링 방법 이 있습니다 .

  • text-center중심 display:inline요소 용
  • offset-*또는 중앙 열 ( )에 mx-auto사용할 수 있습니다.col-*
  • 또는, justify-content-center상의 row에 중앙 컬럼 ( col-*)
  • mx-autodisplay:block내부 요소 중심d-flex

mx-auto(자동 x 축 여백)은 정의 된 너비 (%, vw, px 등)가있는 요소 display:block또는 중앙에 배치됩니다 display:flex. Flexbox는 그리드 열에서 기본적으로 사용되므로 다양한 flexbox 센터링 방법도 있습니다.

부트 스트랩 4 센터링 방법 데모

귀하의 경우, 사용 mx-auto의 중심을 col-3하고 text-center그것의 내용을 중심으로하는 ..

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center
        </div>
    </div>
</div>

https://codeply.com/go/GRUfnxl3Ol

혹은, 사용하는justify-content-center(인 flexbox 소자 상.row) :

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center
        </div>
    </div>
</div>

참조 :
Bootstrap 4의 수직 정렬 센터

답변

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>

스 니펫 확장

원하는대로 열에 ‘유연성’을 활성화하고 justify-content-center를 사용합니다.

답변

text-center열에 클래스 추가 :

<div class="col text-center">
I am centered
</div>

답변

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here
        </div>
    </div>
</div>

내가 사용한 justify-content-center클래스 대신 mx-auto에로를 이 답변 .

https://jsfiddle.net/sarfarazk/4fsp4ywh/ 에서 확인 하십시오.

답변

.row>.col, .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col col-lg-2">
      1 of 2
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

스 니펫 확장

답변

2020 : 유사 호

귀하의 경우 내용이 A는 버튼의 설정 이 페이지에 중심에 원하는이, 다음에 그들을 감싸 행 및 사용 을 정당화 컨텐츠 센터를.

아래 샘플 코드 :

<div class="row justify-content-center">

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button>

</div>

답변