Bố cục CSS - Căn chỉnh ngang & dọc
Yếu tố trung tâm
chiều ngang và chiều dọc
Căn giữa các phần tử
Để căn giữa theo chiều ngang một phần tử khối (như <div>), hãy sử dụng margin: auto;
Việc đặt chiều rộng của phần tử sẽ ngăn nó kéo dài ra các cạnh của vùng chứa nó.
Phần tử sau đó sẽ chiếm chiều rộng đã chỉ định và khoảng trống còn lại sẽ được chia đều cho hai lề:
Phần tử div này được căn giữa.
Ví dụ
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}Hãy tự mình thử » Lưu ý: Căn giữa không có hiệu lực nếu thuộc tính width không được đặt (hoặc được đặt thành 100%).
Căn giữa văn bản
Để căn giữa văn bản bên trong một phần tử, hãy sử dụng text-align: center;
Văn bản này được căn giữa.
Mẹo: Để biết thêm ví dụ về cách căn chỉnh văn bản, hãy xem chương Văn bản CSS .
Căn giữa một hình ảnh
Để căn giữa hình ảnh, đặt lề trái và phải thành auto và biến nó thành thành phần block :
Căn trái và phải - Vị trí sử dụng
Một phương pháp để căn chỉnh các phần tử là sử dụng position: absolute; :
Trong những năm tôi còn trẻ và dễ bị tổn thương hơn, cha tôi đã cho tôi một số lời khuyên mà tôi luôn trăn trở kể từ đó.
Ví dụ
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Hãy tự mình thử »Lưu ý: Các phần tử được định vị tuyệt đối sẽ bị xóa khỏi luồng thông thường và có thể chồng lên các phần tử.
Căn trái và phải - Sử dụng float
Một phương pháp khác để căn chỉnh các phần tử là sử dụng thuộc tính float :
Ví dụ
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Hãy tự mình thử »Hack Clearfix
Lưu ý: Nếu một phần tử cao hơn phần tử chứa nó và được thả nổi, nó sẽ tràn ra ngoài vùng chứa của nó. Bạn có thể sử dụng "hack Clearfix" để khắc phục điều này (xem ví dụ bên dưới).
Không có Clearfix
Với Clearfix
Sau đó, chúng ta có thể thêm bản hack Clearfix vào phần tử chứa để khắc phục sự cố này:
Căn giữa theo chiều dọc - Sử dụng phần đệm
Có nhiều cách để căn giữa một phần tử theo chiều dọc trong CSS. Một giải pháp đơn giản là sử dụng padding trên và dưới:
Tôi đang tập trung theo chiều dọc.
Để căn giữa theo cả chiều dọc và chiều ngang, hãy sử dụng padding và text-align: center :
Tôi tập trung theo chiều dọc và chiều ngang.
Căn giữa theo chiều dọc - Sử dụng chiều cao dòng
Một thủ thuật khác là sử dụng thuộc tính line-height có giá trị bằng thuộc tính height :
Tôi tập trung theo chiều dọc và chiều ngang.
Ví dụ
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
} Hãy tự mình thử »Căn giữa theo chiều dọc - Sử dụng vị trí và biến đổi
Nếu padding và line-height không phải là tùy chọn, thì một giải pháp khác là sử dụng thuộc tính định vị và transform :
Tôi tập trung theo chiều dọc và chiều ngang.
Ví dụ
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Hãy tự mình thử »Mẹo: Bạn sẽ tìm hiểu thêm về thuộc tính biến đổi trong Chương Biến đổi 2D của chúng tôi.
Căn giữa theo chiều dọc - Sử dụng Flexbox
Bạn cũng có thể sử dụng flexbox để căn giữa mọi thứ. Chỉ cần lưu ý rằng flexbox không được hỗ trợ trong IE10 và các phiên bản cũ hơn:
Ví dụ
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
} Hãy tự mình thử »Mẹo: Bạn sẽ tìm hiểu thêm về Flexbox trong Chương CSS Flexbox của chúng tôi.
