Trong CSS, một số thuộc tính có thể được sử dụng để căn chỉnh các phần tử theo chiều ngang.
Căn chỉnh giữa - Sử dụng margin
Thiết lập chiều rộng của phần
tử mức-khối (block-level) sẽ ngăn chặn nó trải dài ra đến các cạnh của phần tử
chứa nó. Sử dụng margin: auto;, để căn phần tử nằm giữa phần
tử chứa nó.
Phần tử sẽ chiếm chiều rộng cụ
thể, và không gian còn lại sẽ được chia đều giữa hai lề:
.center {
margin: auto;
width: 60%;
border:3px
solid #73AD21;
padding: 10px;
}
Mẹo: Căn giữa không có hiệu lực nếu thuộc tính width không được thiết lập (hoặc được thiết lập là 100%).
Mẹo: Để căn chỉnh văn bản, hãy xem chương Văn bản trong CSS.
Căn trái và phải - Sử dụng định vị
Một phương pháp để căn chỉnh
các phần tử là sử dụng position: absolute;:
Ví dụ
.right {
position: absolute;
right: 0px;
width: 300px;
border:3px solid
#73AD21;
padding: 10px;
}
Lưu ý: Các phần tử được định vị tuyệt đối (absolute) được gỡ bỏ khỏi
luồng (flow) bình thường, và có thể
thành các phần tử chồng lấn (overlap).
Mẹo: Khi căn chỉnh các phần tử với position, luôn luôn định nghĩa margin và padding cho phần tử <body>. Điều này là để tránh khác
biệt về hình ảnh trong trình duyệt khác nhau.
Cũng có một vấn đề với IE8 và
các phiên bản trước đó, khi sử dụng position. Nếu một phần tử chứa (trong
trường hợp này là <div class="container">) được chỉ định chiều
rộng, và mô tả !DOCTYPE không có, IE8 và các phiên bản trước đó sẽ thêm margin
là 17px cho lề phải. Điều này có vẻ là không gian dành riêng cho một thanh cuộn.
Vì vậy, luôn luôn phải có mô tả !DOCTYPE khi sử dụng position:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
Căn chỉnh trái và phải - Sử dụng float
Phương pháp khác để căn chỉnh
các phần tử là sử dụng thuộc tính float:
.right {
float: right;
width: 300px;
border:3px solid #73AD21;
padding: 10px;
}
Mẹo: Khi căn chính các phần tử với float, luôn luôn định nghĩa
margin và padding cho phần tử <body>. Điều này là để tránh khác
biệt về hình ảnh trong các trình duyệt khác nhau.
Cũng có một vấn đề với IE8 và
các phiên bản trước đó, khi sử dụng float. Nếu một phần tử chứa (trong
trường hợp này là <div class="container">) được chỉ định chiều rộng,
và mô tả !DOCTYPE không có, IE8 và các phiên bản trước đó sẽ thêm margin là 17px
cho lề phải. Điều này có vẻ là không gian dành riêng cho một thanh cuộn. Vì vậy,
luôn luôn phải có mô tả !DOCTYPE khi sử dụng float:
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
Tự làm bài tập!
CodeLean.vn
Facebook: CodeLean Community
Đăng nhận xét