Nếu bạn là người mới học CSS chắc chắn sẽ rất đau đầu khi cân giữa các phần tử trong HMTL.
Đang xem: Canh giữa theo chiều dọc css
Và cũng có thể cũng gặp trường hợp làm được, trường hợp không.
Hướng dẫn này sẽ giúp bạn hiểu rõ từng trường hợp.
Từ đó có thể căn giữa mọi thể loại phần tử HTML bằng CSS.
Bắt đầu nào!
Nội dung:
Căn giữa trong CSS theo chiều ngangCăn giữa trong CSS theo chiều dọcPhần tử có nhiều dòngCăn giữa cả chiều ngang và chiều dọc
Căn giữa trong CSS theo chiều ngang
Để căn giữa theo chiều ngang trong CSS khá đơn giản, bạn có thể thực hiện theo 3 cách sau đây:
Căn giữa với thuộc tính text-align:center;
Trường hợp các phần tử block có thể sử dụng thuộc tính display: inline-block; để chuyển đổi.
Ví dụ dưới đây căn giữ chữ trong thẻ và căn giữa các thẻ trong thẻ
2
Căn giữa với thuộc tính margin:auto;
Sử dụng thuộc tính: margin: atuo; để căn giữa các phần tử block như:
, , , , ,…
Chỉ hoạt động khi thuộc tính width được chỉ định và width phải nhỏ hơn 100%.
Ví dụ căn giữa thẻ với thuộc tính margin:auto;
2
Căn giữa nhiều phần tử con trong phần tử cha
Trường hợp bạn muốn căn chỉnh tất cả phần tử con, có thể áp dụng 2 thuộc tính display: flex; và justify-content: center; vào phần tử cha.
Hoặc có thể sử dụng display:inline-block; để chuyển chắc phần tử con sang inline-bock sau đó dùng thuộc tính text-align:center; vào phần tử cha.
Ví dụ căn giữa các phần tử trong 2
sau:
2
Căn giữa trong CSS theo chiều dọc
Căn giữa theo chiều dọc trong CSS phức tạp hơn đôi chút.
Những vẫn có rất nhiều các làm.
Phần tử chỉ có 1 dòng
Sử dụng thuộc tính line-height, sử dụng thêm thuộc tính white-space: nowrap; nếu text có nhiều dòng.
Hoặc sử dụng thuộc tính padding-top và padding-bottom với giá trị bằng nhau.
Xem thêm: Liệu Rằng Trái Tim Còn Yêu, Lời Bài Hát Hai Thế Giới Will, Lời Bài Hát Ta Là Của Nhau
Xem thử ví dụ dưới đây:
2
Phần tử có nhiều dòng
Biết chiều cao của phần tử
Trường hợp biết chiều cao phần tử, các bạn sử dụng thuộc tính position:absolute; kết hợp với top:50%; và margin-top (giá trị bằng âm nữa chiều cao phần tử).
Position:absolute; yêu cầu phần tử cha phải khác position:static;Top:50% để dịch chuyển phần tử xuống 50% theo top của phần tử cha.Margin-top (giá trị bằng âm nữa chiều cao phần tử) để dịch chuyển phần tử lên đúng chính giữa.
2
Không biết chiều cao của phần tử
Trường hợp không biết chiều cao phần tử các bạn sử dụng thuộc tính position:absolute; kết hợp với top:50%; và transform: translateY(-50%);
Position:absolute; yêu cầu phần tử cha phải khác position:static;Top:50% để dịch chuyển phần tử xuống 50% theo top của phần tử cha.Transform: translateY(-50%); tương tự như Margin-top (giá trị bằng âm nữa chiều cao phần tử)
Tham khảo thêm thuộc tính position để hiểu cách hoạt động của nó.
2
Sử dụng flexbox
Sử dụng thuộc tính display:flex; và Align-items:center; cho phần tử cha.
2
Căn giữa cả chiều ngang và chiều dọc
Sử dụng thuộc tính position:absolute;
Các bạn sử dụng thuộc tính sau:
Position:absolute; yêu cầu phần tử cha phải khác position:static;Top:50%; để dịch chuyển phần tử xuống dưới 50% theo top của phần tử cha.Left:50%; để dịch chuyển phần sang phải 50% theo left của phần tử cha.Transform: translate(-50%, -50%); tương tự như Margin-top (giá trị bằng âm nữa chiều cao phần tử) và margin-left(giá trị bằng âm nữa chiều rộng phần tử)
Tham khảo ví dụ dưới đây:
2
Sử dụng thuộc tính display:flex;
Các bạn sử dụng thuộc tính sau cho phần tử cha:
Display:flex;Justify-content:center;Align-items:center;
2
Sử dụng thuộc tính display:grid;
Thêm thuộc tính display:grid; vào phần tử cha
Và thêm thuộc tính margin:auto; vào phần tử con.
2
Trường hợp có nhiều phần tử con
Nếu có nhiều phần tử con trong 1 phần tử cha:
Sử dụng position:absolute; có thể cân giữa 1 hoặc nhiều phần tử tùy ý(chỉ việc thêm thuộc tính vào các phẩn tử bạn muốn căn chỉnh)Sử dụng display:flex; chỉ có thể căn giữa tất cả phần tử.Không thể sử dụng display:grid;
Tổng kết
Có nhiều cách để căn giữa một hoặc nhiều phần tử trong CSS, tùy vào trường hợp các bạn có thể chọn cách làm phù hợp.
Xem thêm: Cách Tắt Quảng Cáo Trên Viber Trên Windows Và Mac, Cách Chặn, Bỏ Quảng Cáo Viber Trên Windows Và Mac
Sử dụng position:absolute; và display:flex; là 2 cách làm hiệu quả trong hầu hết trường hợp.
Bạn cũng có thể sử dụng position:absolute; để căn chỉnh theo ý muốn. (Nhớ phần tử cha phải có position khác giá trị static)