Bài viết này sẽ giới thiệu với bạn một số phương pháp căn giữa các phần tử HTML theo chiều dọc. Các phương pháp này giúp bạn dễ dàng căn giữa các phần tử và tạo ra giao diện hấp dẫn hơn. Tuy nhiên, việc căn giữa các phần tử trong HTML có thể phức tạp và gây khó khăn cho nhiều lập trình viên web.
Trong bài viết này, chúng ta sẽ tìm hiểu về các phương pháp căn giữa bao gồm:
Mẹo sử dụng line-height
Phương pháp này sử dụng thuộc tính line-height để căn giữa các dòng chữ. Bằng cách gán giá trị line-height của phần tử chứa chữ bằng giá trị chiều cao của phần tử đó, chữ sẽ được căn giữa theo chiều dọc. Phương pháp này tương đối đơn giản và dễ áp dụng.
<div class="center-text">Hello World!</div> .center-text { width: 400px; height: 120px; font-size: 24px; line-height: 120px; text-align: center; background-color: #fafafa; border: solid 1px lightgray; }Tuy nhiên, phương pháp này chỉ có tác dụng với một dòng chữ, với nhiều dòng sẽ không hoạt động hiệu quả.
Mẹo sử dụng absolute bên trong relative position
Phương pháp này sử dụng thuộc tính margin: auto để căn giữa một phần tử bên trong phần tử cha của nó. Bằng cách xác định độ rộng và chiều cao của phần tử con, chúng ta có thể căn giữa thành công các phần tử.
<div class="cnt-div"> <img src="cat.jpg" /> </div> .cnt-div { position: relative; width: 400px; height: 120px; background-color: #fafafa; border: solid 1px lightgray; } .cnt-div > img { position: absolute; width: 64px; height: 64px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }Mẹo sử dụng padding và margin
Phương pháp này sử dụng thuộc tính padding và margin để căn giữa các phần tử HTML. Bằng cách thay đổi giá trị padding và margin, chúng ta có thể dễ dàng điều chỉnh vị trí của phần tử. Tuy nhiên, phương pháp này chỉ phù hợp với nội dung tĩnh và có hạn chế với nội dung động.
Tôi đã giới thiệu cho bạn ba phương pháp căn giữa các phần tử HTML. Tuy mỗi phương pháp có nhược điểm riêng, nhưng chúng đều có thể giúp bạn tạo ra giao diện đẹp và chuyên nghiệp. Hãy thử áp dụng chúng vào dự án của bạn và tận hưởng kết quả tuyệt vời!