Hướng dẫn căn giữa bootstrap 4

Để canh giữa 2 khối div theo chiều dọc thì ta có nhiều cách làm ví dụ như sử dụng margin auto, table cell tuy nhiên những cách đó đã lâu và không phù hợp với công nghệ Flex mới bây giờ.
Ở bài học này mình sẽ hướng dẫn bạn căn giữa 2 khối div theo chiều dọc nhanh chóng.

Bootstrap 4 đã hỗ trợ class align-self-center, nó sử dụng Flex để giúp canh giữa tốt hơn. Mình sẽ đặt nó trong DIV cần được canh giữa, hay nói cách khác là DIV nào có chiều cao thấp thì ta gắn class vào!

Hướng dẫn căn giữa bootstrap 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Cám ơn bạn đã đọc bài viết.

Tôi đang sử dụng bootstrap 4 alpha 3.
Tôi muốn căn giữa thẻ theo chiều ngang ở giữa trên trang.

Preview / link: http://codepen.io/vaibhavsingh97/full/VjRAXW

Tôi đã thử tất cả các tùy chọn khác nhau được liệt kê trên trang ví dụ bootstrap 4 cho thẻ.

Làm thế nào tôi có thể đạt được điều này?

  • html
  • css
  • bootstrap-4

61 hữu ích 1 bình luận 283k xem chia sẻ

answer

129

Hướng dẫn căn giữa bootstrap 4

Thêm css cho .card

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

đây là cái bút

CẬP NHẬT: Bạn có thể sử dụng lớp .mx-autocó sẵn trong thẻ bootstrap 4 để làm trung tâm.

129 hữu ích 3 bình luận chia sẻ

answer

101

Hướng dẫn căn giữa bootstrap 4

Cập nhật 2019

Không cần thêm CSS và có nhiều phương pháp căn giữa trong Bootstrap 4:

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

mx-auto(lề trục x tự động) sẽ căn giữa 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 khác nhau .

Trong trường hợp của bạn, bạn có thể chỉ cần mx-autođến các thẻ.

101 hữu ích 2 bình luận chia sẻ

answer

7

Hướng dẫn căn giữa bootstrap 4

Đặt các phần tử mà bạn muốn chuyển vào giữa trong thẻ div này.

7 hữu ích 0 bình luận chia sẻ

answer

1

Hướng dẫn căn giữa bootstrap 4

Bạn cũng có thể sử dụng Bootstrap 4 lớp flex

Như: .align-item-center.justify-content-center

Chúng ta có thể sử dụng các lớp này giống hệt nhau cho tất cả chế độ xem thiết bị.

Giống: .align-item-sm-center, .align-item-md-center, .justify-content-xl-center, .justify-content-lg-center, .justify-content-xs-center

Lớp .text-center được sử dụng để căn chỉnh văn bản ở giữa.

1 hữu ích 0 bình luận chia sẻ

answer

0

Hướng dẫn căn giữa bootstrap 4

về cơ bản tôi đề xuất khoảng cách bằng nhau ở bên phải và bên trái, và đặt chiều rộng thành tự động. Ở đây như:

.bmi {         /*my additional class name -for card*/
    margin-left: 18%;      
    margin-right: 18%;
    width: auto;
}

0 hữu ích 0 bình luận chia sẻ

Hướng dẫn căn giữa bootstrap 4

Đăng nhập để trả lời câu hỏi

Có thể bạn quan tâm

Hướng dẫn căn giữa bootstrap 4