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

95

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

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

twitter-bootstrap flexbox bootstrap-4

— 프라 빈 쿠마르
소스

2

사용은 class="text-center".

— Mihai Alexandru-Ionut

나는 그것을 사용해 보았지만 Bootstrap4에서 작동하지 않습니다. 텍스트 만 중앙에 위치하지만 "nauk-info-connections"클래스 자체를 가진 div가 col-3 div 내부에 정렬되어야합니다.

— Praveen Kumar

컨테이너를 중앙에 배치하는 전통적인 방법을 사용했습니다. .nauk-info-connections {border-radius : 50 %; border : 1px 단색 $ nauk-orange; 높이 : 100px; 너비 : 100px; 여백 : 0 자동; }

— Praveen Kumar

206

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의 수직 정렬 센터

— 짐
소스

감사. 예제 또는 Bootstrap 문서에서 볼 수없는 것은 다른 중단 점에서 인라인이 아닌 요소의 수평 중심입니다. 예를 들어, <select>md 이상을 중심으로 하지만 md 아래에 왼쪽 정렬합니다.

— KayakinKoder

Bootstrap 4를 사용하는 경우 selectdisplay : block이므로 display : inline form-control이 아니라 display : block입니다. 물론 원래 질문은 반응 형 중단 점을 사용하는 것이 아니므로 답변에 설명되어 있지 않습니다.

— Zim

12

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

스 니펫 확장

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

— Dhinesh 예
소스

이것은 나를 위해 일한 유일한 솔루션입니다. 휴! 감사합니다;)

— Akhil

8

text-center열에 클래스 추가 :

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

— 제 카우스
소스

5

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

— Sarfaraz Kasmani
소스

2

이것은 이미 최고 투표 답변

— Jean-François Corbett

@ Jean-François Corbett mx-auto 대신 justify-content-center 클래스를 사용했습니다. 이것은 또한 그것을하는 한 가지 방법입니다. 사람들은 이것을 사용할 수 있습니다. 나는 단지 다른 사람들을 돕기 위해 노력하고 있습니다. 감사합니다

— Sarfaraz Kasmani

아, 맞아. 글쎄, 약간의 설명은 먼 길을 갈 수 있습니다.

— Jean-François Corbett

1

.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>

스 니펫 확장

— Abdo- 호스트
소스

1

2020 : 유사 호

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

아래 샘플 코드 :

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

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

</div>

— 마르코 젠
소스