Làm cách nào bạn có thể căn giữa một khối hoặc phần tử nút khối nội tuyến bằng cách sử dụng CSS và HTML?
Điều này có thể hơi phức tạp, nhưng đây là một số mẹo nhanh về cách căn giữa nút của bạn, bất kể đó là loại phần tử nào.
Phần tử nút nội tuyến
Các phần tử nút và liên kết, theo mặc định, được đặt thành display: inline-block . Một phần tử có tập hợp khối nội tuyến sẽ được chứa trong luồng thông thường của tài liệu trên trang khi nó di chuyển từ trái sang phải.
Điều này có nghĩa là nếu bạn có hai phần tử khối nội tuyến nối tiếp nhau, chúng sẽ hiển thị cạnh nhau nếu có đủ không gian theo chiều ngang.
Điều này tương tự với các phần tử có display: inline đặt, ngoại trừ bạn có thể kiểm soát chiều cao và chiều rộng của các phần tử khối nội tuyến chứ không phải các phần tử nội tuyến.
Căn giữa bằng text-align:center
Bạn có thể căn giữa các phần tử khối nội tuyến (và nội dòng) bằng cách đặt text-align: center trên một phần tử mẹ.
Hãy xem cách này hoạt động trong mã. Đây là đánh dấu HTML của chúng tôi:
<div class="text-center">
<button type="submit">Text-align: center</button>
</div>Và CSS của chúng tôi:
.text-center {
text-align: center;
}
Chúng tôi đã bọc <button> của mình phần tử trong <div> với text-align: center đặt. Điều này sẽ dẫn đến việc căn giữa nút như thế này:
Phần tử nút khối w / static width
Các phần tử khối không được căn giữa bằng text-align: center bởi vì chúng theo mặc định sẽ là toàn chiều rộng trừ khi được cung cấp một chiều rộng tĩnh.
Đôi khi bạn có thể cần đặt chiều rộng tĩnh trên một nút, vì vậy nếu bạn làm vậy, bạn có thể sử dụng kỹ thuật này để căn giữa nút trên trang.
Giả sử chúng tôi có một nút mà chúng tôi đã đặt rộng 200px. Mặc dù nó chỉ có 200px, nhưng nó sẽ không để bất kỳ yếu tố nào khác ở bên cạnh nó.
Bạn có thể căn giữa một phần tử mức khối bằng cách đặt margin-left và margin-right thành auto . Chúng ta có thể sử dụng viết tắt margin: 0 auto để làm điều này. (Điều này cũng đặt margin-top và margin-bottom bằng không.)
Hãy xem điều này trông như thế nào trong mã:
<button type="submit" class="block magenta margin-auto">Margin: 0 auto</button> .button.block {
display: block;
width: 200px;
}
.margin-auto {
margin: 0 auto;
}Và nút sẽ giống như thế này trên trang:
Căn giữa bằng flexbox
Ngoài ra, bạn có thể căn giữa cả phần tử khối nội tuyến và khối bằng cách sử dụng flexbox.
Bao bọc nút trong <div> mẹ và đặt giá trị gốc thành display: flex và justify-content: center .
Đây là mã cho điều đó:
<div class="flex-parent jc-center">
<button type="submit">Inline-block button</button>
</div>
<div class="flex-parent jc-center">
<button type="submit">Block button</button>
</div>.flex-parent {
display: flex;
}
.jc-center {
justify-content: center;
}
Hai nút cạnh nhau
Đôi khi bạn có thể muốn có hai nút bên cạnh nhau nhưng phải căn giữa cả hai nút với nhau trên trang.
Bạn có thể đạt được điều này bằng cách gói cả hai nút trong một <div> chính và sử dụng flexbox để căn giữa chúng trên trang.
Đây là mã cho ví dụ đó:
<div class="flex-parent jc-center">
<button type="submit" class="green margin-right">Confirm</button>
<button type="submit" class="magenta">Cancel</button>
</div>.flex-parent {
display: flex;
}
.jc-center {
justify-content: center;
}
button.margin-right {
margin-right: 20px;
}
Lưu ý rằng chúng tôi cũng đã thêm margin-right: 20px vào nút đầu tiên, để thêm khoảng cách giữa chúng.
Đây là giao diện của các nút trên trang!
Bạn có thể xem tất cả mã thực tế trong Codepen tại đây.