Làm sao để căn giữa element button kiểu block hoặc inline-block bằng CSS và HTML?
Việc này hơi rắc rối, nhưng đây là vài mẹo nhanh để căn giữa nút, bất kể loại element nào.
Element button inline-block
Element button và link mặc định là display: inline-block. Element inline-block nằm trong luồng bình thường của trang khi di chuyển từ trái sang phải.
Nghĩa là nếu có hai element inline-block liên tiếp, chúng sẽ hiển thị cạnh nhau nếu đủ không gian ngang.
Điều này tương tự element display: inline, trừ việc bạn có thể kiểm soát height và width của inline-block, không làm được với inline.
Căn giữa bằng text-align: center
Bạn có thể căn giữa element inline-block (và inline) bằng cách đặt text-align: center cho element cha.
Xem cách hoạt động trong code. HTML markup:
<div class="text-center"> <button type="submit">Text-align: center</button> </div>CSS:
.text-center { text-align: center; }Chúng ta bọc <button> trong <div> có text-align: center. Kết quả căn giữa nút như sau:
Element button block với width cố định
Element block không căn giữa được bằng text-align: center vì mặc định chúng full-width trừ khi cho width cố định.
Đôi khi bạn cần đặt width cố định cho nút, khi đó dùng kỹ thuật này để căn giữa nút trên trang.
Giả sử nút width 200px. Dù chỉ 200px, nó không cho element nào nằm cạnh.
Bạn căn giữa element block bằng cách đặt margin-left và margin-right là auto. Dùng shorthand margin: 0 auto (cũng đặt margin-top và margin-bottom về 0).
Xem code:
<button type="submit" class="block magenta margin-auto">Margin: 0 auto</button> .button.block { display: block; width: 200px; } .margin-auto { margin: 0 auto; }Nút sẽ trông như sau:
Căn giữa bằng flexbox
Thay vào đó, bạn có thể căn giữa cả inline-block và block element bằng flexbox.
Bọc nút trong <div> cha, đặt cha là display: flex và justify-content: center.
Code:
<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 muốn hai nút cạnh nhau, nhưng căn giữa cả hai cùng lúc trên trang.
Làm được bằng cách bọc cả hai nút trong <div> cha và dùng flexbox căn giữa.
Code 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 ý thêm margin-right: 20px cho nút đầu để tạo khoảng cách giữa chúng.
Kết quả:
Bạn có thể xem toàn bộ code thực tế trên Codepen tại đây.