Bootstrap 4의 열 중앙에 콘텐츠 배치

Bootstrap 4의 열 중앙에 콘텐츠 배치

---

문제를 해결하는 데 도움이 필요합니다. 콘텐츠를 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>

http://www.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의 수직 정렬 센터

---

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/ 에서 확인 하십시오.

참고 URL : https://stackoverflow.com/questions/42528411/center-the-content-inside-a-column-in-bootstrap-4