Căn Giữa Thẻ Div Trong Thẻ Div - Phan Tiến Quang

Có thể bạn quan tâm

Căn giữa thẻ div trong thẻ div

By Quang Phan - June 29, 2014

Với thiết kế web hiện đại, việc layout theo dạng tabless (dùng thẻ <div>) đã trở nên phổ biến và thường xuyên hơn là dạng table (dùng thẻ <table>) vì thẻ <div> được render nhanh hơn <table>. Chính vì vậy, sử dụng thuần thục <div> chính là một lợi thế rất lớn. Trong bài hướng dẫn này, mình sẽ giới thiệu với các bạn một cách vô cùng đơn giản để căn giữa thẻ div bên trong 1 thẻ div bằng 1 thuộc tính mới cúa CSS.

HTML

CSS

Mình khuyên các bạn nên sử dụng Firefox mới nhất để viết CSS, firefox sẽ hiển thị quá trình thay đổi khi bạn thay đổi thuộc tính CSS của thành phần html.

Đầu tiên, mình sẽ cho thẻ div cha căn giữa màn hình và chưa quan tâm tới div con.

Kết quả

flex css

Bây giờ mình sẽ cho thẻ div con màu xanh nằm chính giữa thẻ div cha màu đen bằng cách cho thuộc tính display của thẻ cha là flex, đồng thời thẻ con margin auto

Kết quả

flex css

Khá đơn giản phải không nào!

Chú ý

Dòng 6 là định dạng thẻ cha hiển thị dạng flex.
Dòng 13 là để thẻ con tự động canh giữa so với thẻ cha.

Tham khảo thuộc tính flex.

Về việc canh giữa thẻ div, chúng ta có rất nhiều cách, nhưng sử dụng flex là 1 thuộc tính hoàn toàn mới và code cũng vô cùng ngắn gọn. Mà càng ngắn gọn thì trang web chạy càng nhanh.

Hy vọng qua thủ thuật này, các bạn có thêm 1 lựa chọn cho mình để layout trang web như ý.

html/css/js

Comments

Unknown1/25/2016 10:34 AM
tuyệt vời :v
ReplyDeleteReplies
1. Quang Phan1/25/2016 10:35 AM
  :v
  DeleteReplies
Anonymous7/08/2016 8:40 PM
hay thật!
ReplyDeleteReplies
Unknown8/06/2018 6:02 PM
a ơi cho e hỏi nếu để width của div cha là 100% thì nó không căn giữa được nữa phải xử lí thế nào ạ
ReplyDeleteReplies
1. anhpt89199510/15/2018 2:24 PM
  100% thì như là nó đủ cái div rồi làm sao mà căn đc nữa nhỉ
  DeleteReplies
Minh Thành4/14/2021 3:18 PM
hệ thống thiết bị tự phục vụ của công ty Minh Thành
ReplyDeleteReplies
YnordpodKvinge4/23/2022 10:17 AM
YnordpodKvinge Patrick Herman https://marketplace.visualstudio.com/items?itemName=terpmogthergu.JumpingFrog-gratuita-2021 onothmire
ReplyDeleteReplies
pranamfrag-ro5/19/2022 4:55 PM
pranamfrag-ro Kenneth Thompson https://www.gdnonline.org/profile/Kakasoft-Usb-Copy-Protection-Full-Cracked-LINK/profile profilnisi
ReplyDeleteReplies
0lenfiQthrit_tsu5/31/2022 8:46 PM
0lenfiQthrit_tsu Kaylee Castro Here inarimon
ReplyDeleteReplies

Add commentLoad more...

Thay đổi quyền ownership trong Windows

By Quang Phan - June 30, 2014

Một ngày đẹp trời, bạn đang soạn thảo văn bảng bằng MS Word và muốn lưu nó nhưng lỗi không cho phép lưu xuất hiện, hoặc mỗi lần bạn muốn copy file đều phải "xin phép" admin...Đối với những lỗi như vậy, việc đầu tiên nghĩ ngay tới đó là thay đổi quyền ownership. Read more

Gỡ bộ Visual Studio ra khỏi máy tính

By Quang Phan - August 27, 2014

Cài đặt Visual Studio quả là một công việc "dài hơi", thế nhưng để gỡ nó ra khỏi máy tính thì cũng dài hơi không kém, vì khi cài đặt VS, cả một núi bùi nhùi đi kèm theo nó. Tuy nhiên có 1 giải pháp mà Microsoft đưa ra, "có vẻ" như rất hữu ích. (Mình đã từng gỡ bộ VS 2012 theo cách này, các phiên bản cao hơn đều áp dụng tốt.) Theo cách này, bạn không cần sử dụng Programs and Futures để gỡ mà sử dụng chính bộ cài đặt của VS để gỡ bỏ nó. Read more

Truyền dữ liệu giữa 2 form bằng delegate và event

By Quang Phan - July 01, 2014

Delegate là một khái niệm không xa lạ gì trong c# và nó cũng có rất nhiều công dụng. Trong nội dung bài viết này, mình xin giới thiệu một công dụng vô cùng hữu dụng của delegate, đó là truyền dữ liệu. Read more

Từ khóa » Canh Giữa Thẻ Div Trong Html

Căn Giữa Thẻ Div Trong Thẻ Div - Phan Tiến Quang