Căn giữa nội dung bên trong một cột trong Bootstrap 4

95

Tôi cần trợ giúp để khắc phục sự cố, tôi cần căn giữa nội dung bên trong cột trong bootstrap4, vui lòng tìm mã của tôi bên dưới

<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

— Praveen Kumar
nguồn

2

Sử dụng có thể sử dụng class="text-center".

— Mihai Alexandru-Ionut,

Tôi đã thử sử dụng nó nhưng nó không hoạt động cho Bootstrap4, riêng văn bản đang được căn giữa nhưng tôi cần div có lớp "nauk-info-results" được căn giữa bên trong div col-3.

— Praveen Kumar

Tôi đã sử dụng phương pháp truyền thống để căn giữa vùng chứa .nauk-info-links {border-radius: 50%; border: 1px solid $ nauk-orange; chiều cao: 100px; chiều rộng: 100px; margin: 0 auto; }

— Praveen Kumar

206

Có nhiều phương pháp căn giữa theo chiều ngang trong Bootstrap 4 ...

text-centercho display:inlinecác yếu tố trung tâm
offset-*hoặc mx-autocó thể được sử dụng để căn giữa cột ( col-*)
hoặc justify-content-centertrên cộtrow đến giữa ( col-*)
mx-autođể căn giữa display:blockcác yếu tố bên trongd-flex

mx-auto(lề trục x tự động) sẽ căn giữa display:blockhoặc display:flexcác phần tử có chiều rộng xác định, (%, vw, px, v.v.). Flexbox được sử dụng theo mặc định trên các cột lưới, vì vậy cũng có nhiều phương pháp căn giữa flexbox khác nhau.

Bản trình diễn của phương pháp căn giữa Bootstrap 4

Trong trường hợp của bạn, hãy sử dụng mx-autođể căn giữa col-3và căn text-centergiữa nội dung của nó ..

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

https://codeply.com/go/GRUfnxl3Ol

hoặc, sử dụngjustify-content-centertrên các phần tử flexbox (.row):

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

Xem thêm:
Trung tâm căn chỉnh dọc trong Bootstrap 4

— Zim
nguồn

Cảm ơn. Những gì tôi không thấy trong bất kỳ ví dụ hoặc tài liệu Bootstrap nào là căn giữa theo chiều ngang của các phần tử không nội tuyến, tại các điểm ngắt khác nhau. Ví dụ: căn giữa a <select>tại md trở lên, nhưng căn trái bên dưới md.

— KayakinKoder

Nếu bạn đang sử dụng Bootstrap 4, selectnó là display: block, not display: inline vì form-controllà display: block. Tất nhiên, câu hỏi ban đầu không phải về việc sử dụng các điểm ngắt đáp ứng nên điều đó không được giải thích trong câu trả lời.

— Zim

12

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

Mở rộng đoạn mã

Bật 'flex' cho cột như chúng tôi muốn và sử dụng justify-content-center

— Dhinesh Có
nguồn

đây là giải pháp duy nhất làm việc cho tôi. phew! cảm ơn bạn;)

— Akhil

8

Thêm lớp text-centervào cột của bạn:

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

— zhekaus
nguồn

5

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

Tôi đã sử dụng justify-content-centerlớp học thay vì mx-autonhư trong câu trả lời này .

kiểm tra tại https://jsfiddle.net/sarfarazk/4fsp4ywh/

— Sarfaraz Kasmani
nguồn

2

Điều này đã được đề cập trong câu trả lời được bình chọn nhiều nhất

— Jean-François Corbett.

@ Jean-François Corbett Tôi đã sử dụng lớp justify-content-center thay vì mx-auto. Đây cũng là một trong những phương pháp làm việc đó. Mọi người có thể sử dụng điều này. Tôi chỉ đang cố gắng giúp đỡ người khác. Cảm ơn

— Sarfaraz Kasmani,

À, đúng rồi. Vâng, một chút giải thích có thể đi một chặng đường dài.

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

Mở rộng đoạn mã

— Abdo-Host
nguồn

1

2020: Vấn đề tương tự

Nếu nội dung của bạn là một tập hợp các nút mà bạn muốn căn giữa trên một trang, thì hãy xếp chúng thành một hàng và sử dụng justify-content-center.

Mã mẫu bên dưới:

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

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

</div>

— MarcoZen
nguồn