căn giữa đối tượng theo chiều ngang trong css WDI Blog

6 cách căn giữa đối tượng theo chiều ngang trong CSS7 phút đọc

Căn giữa đối tượng theo chiều ngang trong CSS là một trong những kĩ thuật quan trọng nhất khi dàn trang website.Kĩ thuật này được web developer sử dụng thường xuyên trong hầu hết các dự án nhưng mình tin chắc nhiều bạn vẫn chưa hiểu rõ bản chất của kĩ thuật này.

Dưới đây mình có giới thiệu 6 cách để căn giữa đối tượng theo chiều ngang trong CSS, tùy theo từng trường hợp cụ thể của dự án mà bạn hãy lựa chọn cách tối ưu nhất với bản thân mình.

Sử dụng [ text-align ] và [ inline-block ]

Trước tiên cách quen thuộc nhất đó là sử dụng thuộc tính text-align.

HTML

Trên đây là đoạn code HTML mẫu áp dụng cho toàn bộ ví dụ trong bài viết này.Đoạn code HTML này bao gồm div có class outer đóng vai trò thành phần mẹ và div có class inner đóng vai trò thành phần con.Bên trong thành phần con inner là đoạn text mẫu Lorem ipsum như bạn thấy ở trên.

CSS

Để các bạn dễ hình dung thì mình có thêm một số thuộc tính về màu sắc và màu sắc này sẽ thay đổi qua mỗi ví dụ.Còn một số thuộc tính định dạng như border, padding, width cũng được mình thêm vào để khi hiển thị kết quả trông đẹp mắt hơn.

Giờ vào vấn đề chính nhé.Để căn giữa khối con inner về giữa khối mẹ outer theo chiều ngang thì bạn cần thêm thuộc tính text-align: center; vào trong CSS của khối mẹ outer.Thêm vào đó cần một điều kiện nữa là khối con inner phải có định dạng inline-block.

Khi thỏa mãn hai điều kiện này thì khối con inner sẽ tự động nằm giữa khối mẹ outer theo chiều ngang.Lúc này nếu muốn thành phần bên trong khối con inner dịch hết về phía bên trái thay vì mặc định nằm giữa thì bạn hãy thêm thuộc tính text-align:left; vào trong CSS của khối con inner.

Kết quả 

căn giữa đối tượng theo chiều ngang trong css

Căn giữa đối tượng theo chiều ngang trong CSS

Trên đây là kết quả sau khi thực hành đoạn code trên.Bạn hãy tự copy code về và thực hành ngay khi có thể nhé.

Code ứng dụng

Sử dụng [ margin ]

Một cách nữa cũng rất phổ biến khi thực hiện căn giữa đối tượng theo chiều ngang trong CSS đó là sử dụng margin.

CSS

Trong trường hợp này bạn chỉ cần viết thuộc tính margin: 0 auto; cho khối con inner.Cần thêm một điều kiện nữa đó là khối con inner này phải được thiết lập chiều rộng.Thỏa mãn hai điều kiện này thì khối con inner sẽ tự động nằm giữa khối mẹ outer theo chiều ngang.

Bạn chú ý cách viết margin: 0 auto; tương đương với đoạn code dưới đây :

Bạn có thể lược bỏ đi  hoặc thay đổi giá trị hai dòng code margin-top: 0; margin-bottom : 0; nếu bạn muốn vì hai thuộc tính này không ảnh hưởng gì đến kĩ thuật căn giữa theo chiều ngang này cả.

Đoạn code thực mà chúng ta cần cho kĩ thuật này chỉ gồm ba dòng sau.

Kết quả

căn giữa đối tượng theo chiều ngang trong css

Căn giữa đối tượng theo chiều ngang trong css sử dụng margin

Đây là kết quả sau khi thực hành đoạn code mẫu ở trên.Ngoài màu sắc ra thì không khác gì ví dụ ở trên.

Code ứng dụng

Sử dụng Flexbox và [ justify-content ]

Thời gian gần đây căn giữa đối tượng theo chiều ngang trong CSS sử dụng Flexbox đang chiếm ưu thế so với những phương pháp truyền thống ở trên.Lý do chắc nhiều bạn đoán ra, đó là vì sự đơn giản và không kèm điều kiện như hai cách ở trên.

CSS

Ở cách sử dụng Flexbox này bạn cần khai báo hai thuộc tính là display: flex;justify-content: center; bên trong CSS của khối mẹ outer.Toàn bộ thành phần con nằm bên trong khối mẹ outer sẽ tự động căn về giữa hết

Kết quả

căn giữa đối tượng theo chiều ngang trong css sử dụng flexbox

Căn giữa đối tượng theo chiều ngang trong css sử dụng Flexbox và justify-content

Kết quả giống như các ví dụ trên khi mà khối con inner cũng đã tự động căn về giữa theo chiều ngang.Từ ví dụ này trở đi mình giảm chiều rộng khối con inner xuống còn 50% thay vì 80% như các ví dụ trên.

Code ứng dụng

Sử dụng Flexbox và [ margin ]

Căn giữa đối tượng theo chiều ngang trong CSS sử dụng Flexbox kết hợp với thuộc tính margin vẫn còn là một kĩ thuật khá mới và ít người biết đến.

CSS

Bạn phải khai báo thuộc tính display: flex; cho CSS của khối mẹ outer sau đó tiếp tục khai báo thuộc tính margin: 0 auto; cho CSS của khối con inner.

Tương tự như ở ví dụ 2 ở trên bạn có thể khai báo margin-left: auto; margin-right: auto; thay vì margin: 0 auto;  cho CSS của khối con inner.

Kết quả

căn giữa đối tượng theo chiều ngang trong css sử dụng flexbox và margin

Căn giữa đối tượng theo chiều ngang trong css sử dụng Flexbox và margin

Trên đây là kết quả khi bạn thực hành đoạn code mẫu của phần này.

Code ứng dụng

Sử dụng Grid và [ margin ]

Căn giữa đối tượng theo chiều ngang trong CSS sử dụng Grid kết hợp với thuộc tính margin là kĩ thuật hoàn toàn giống với kĩ thuật sử dụng Flexbox và thuộc tính margin ở trên.

CSS

Ở khối mẹ outer bạn chỉ cần thay thuộc tính display: flex; bằng thuộc tính display: grid; là ok.Còn những thiết lập khác thì hoàn toàn như ở ví dụ ngay bên trên đây.

Kết quả

căn giữa đối tượng theo chiều ngang trong css sử dụng grid và margin

Căn giữa đối tượng theo chiều ngang trong css sử dụng Grid và margin

Code ứng dụng

Sử dụng Grid và [ justify-content ]

Cách cuối cùng để căn giữa đối tượng theo chiều ngang trong CSS mà mình muốn giới thiệu đến các bạn đó là cách  sử dụng Grid và thuộc tính justify-content.

CSS

Ở cách này bạn cần khai bao hai thuộc tính là display: grid;justify-content: center; trong CSS của khối mẹ outer.Ngoài ra cần có thêm một điều kiện nữa đó là khai báo chiều rộng của khối con inner thông qua thuộc tính grid-template-columns.

Về giá trị minmax(auto, 50%) của thuộc tính grid-template-columns, auto là giá trị nhỏ nhất của khối inner và giá trị lớn nhất của nó là chiếm 50% chiều rộng của khối mẹ.

Kết quả

căn giữa đối tượng theo chiều ngang trong css sử dụng grid và justify-content

Căn giữa đối tượng theo chiều ngang trong css sử dụng Grid và justify-content

Code ứng dụng

Kết luận

Qua từng ví dụ và giải thích của mình trên đây hi vọng bạn sẽ hiểu rõ bản chất của các cách căn giữa đối tượng theo chiều ngang trong CSS.Từ đó áp dụng linh hoạt các cách này trong những dự án sắp tới.Với 6 cách trên đây, đôi khi cách này không áp dụng được thì vẫn sẽ có những cách khác để bạn tham khảo.

Sắp tới mình sẽ còn nhiều bài viết hay về kĩ thuật CSS khác nữa, các bạn hãy luôn theo dõi và ủng hộ WDI BLog để cập nhật nhiều kiến thức bổ ích hơn nữa.Chúc bạn thành công trong công việc.

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x