Bố cục trong CSS - căn chỉnh theo chiều ngang và chiều dọc - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

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, khoảng trống còn lại sẽ được chia đều cho hai bên lề:

.center {
    margin: auto;
    width: 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 width 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;
    width: 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;
    width: 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;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 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;
    width: 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;
    width: 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%);
}