Bố cục trong CSS – căn chỉnh theo chiều ngang và chiều dọc
Căn giữa cho phần tử Để căn giữa theo chiều ngang cho một phần tử khối (như <div>) bạn có thể sử dụng margin: auto; Thiết lập chiều rộng của phần tử sẽ ngăn chúng không bị tràn ra khỏi phần tử chứa nó. Phần tử sau khi chiếm chiều rộng được chỉ định, ...
Căn giữa cho phần tử
Để căn giữa theo chiều ngang cho một phần tử khối (như <div>) bạn có thể sử dụng margin: auto; Thiết lập chiều rộng của phần tử sẽ ngăn chúng không bị tràn ra khỏi phần tử chứa nó.
Phần tử sau khi chiếm chiều rộng được chỉ định, khoảng trống còn lại sẽ được chia đều cho hai bên lề:
.center {
margin: auto;
awidth: 50%;
border: 3px solid green;
padding: 10px;
}
Lưu ý: căn chỉnh giữa sẽ không tạo ra hiệu ứng nếu thuộc tính awidth không được thiết lập (hoặc thiết lập là 100%).
Căn giữa văn bản
Để căn giữa văn bản ở bên trong phần tử, sử dụng text-align: center;
.center {
text-align: center;
border: 3px solid green;
}
Căn giữa hình ảnh
Để căn giữa một ảnh, sử dụng margin: auto; và làm cho chúng trở thành phần tử khối:
img {
display: block;
margin: auto;
awidth: 40%;
}
Căn trái và phải – sử dụng position
Một phương pháp để căn chỉnh phần tử là sử dụng position: absolute;
.right {
position: absolute;
right: 0px;
awidth: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Lưu ý: phần tử có vị trí tuyệt đối bị loại bỏ khỏi dòng trôi nổi và có thể đè lên các phần tử khác.
Mẹo: khi căn chỉnh phần tử với position, luôn cần xác định margin và padding cho phần tử <body>. Điều này giúp tránh tình trạng không đồng nhất các hiển thị trên các trình duyệt khác nhau.
Đây cũng là vấn đề đối với các phiên bản IE8 trở về trước khi sử dụng position. Nếu phần tử chứa (trong thẻ <div class=”container” > ) được xác định chiều rộng mà không khai báo !DOCTYPE, phiên bản IE8 trở về trước sẽ thêm margin 17px vào lề phải. Điều này tạo ra khoảng trống cho thanh cuộn. Vì thế luôn thiết lập khai báo !DOCTYPE khi sử dụng position:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
awidth: 100%;
}
.right {
position: absolute;
right: 0px;
awidth: 300px;
background-color: #b0e0e6;
}
Căn trái và phải – sử dụng float
Cách khác để căn chỉnh phần tử đó là sử dụng thuộc tính float:
.right {
float: right;
awidth: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Mẹo: khi căn chỉnh phần tử với float, luôn cần xác định margin và padding cho phần tử <body>. Điều này tránh sự không đồng nhất trong cách hiển thị giữa các trình duyệt khác nhau.
Đây cũng là vấn đề với phiên bản IE8 trở về trước khi sử dụng float. Nếu không khai báo !DOCTYPE, IE8 cùng các phiên bản cũ hơn sẽ thêm margin 17px vào lề phải. Điều này tạo ra khoảng trống cho thanh cuộn, vì thế cần phải khai báo !DOCTYPE khi dùng float.
body {
margin: 0;
padding: 0;
}
.right {
float: right;
awidth: 300px;
background-color: #b0e0e6;
}
Căn giữa theo chiều dọc – sử dụng padding
Có nhiều cách để căn giữa một phần tử theo chiều dọc trong CSS. Giải pháp đơn giản nhất đó là sử dụng padding top và padding bottom:
.center {
padding: 70px 0;
border: 3px solid green;
}
Để căn gữa cả theo chiều ngang và chiều dọc, sử dụng padding kèm theo text-align: center;
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
Căn giữa theo chiều dọc – sử dụng line-height
Một cách khác là sử dụng thuộc tính line-height với giá trị giống như thuộc tính height:
.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;
}
Căn giữa theo chiều dọc – sử dụng position và transform
Nếu padding và line-height không được lựa chọn, cách thứ ba là sử dụng định vị và thuộc tính transform:
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
