Khóa học CSS - Bài 22 - Canh lề Dọc và Ngang

Quay về MỤC LỤC TỰ HỌC CSS

1. Canh giữa đối tượng

Ta dùng thuộc tính margin:auto và định giá trị cho bề rộng (width).

Ví dụ:

.center {
    margin: auto;
    width: 50%;
    border: 3px solid #73AD21;
}

Và thẻ HTML trong phần body

<div class="center">Lớp học vi tính .COM</div>

2. Canh giữa chữ

Ta dùng thuộc tính text-align:center

Ví dụ:

.center {
    margin: auto;
    width: 50%;

    text-align: center;
    border: 3px solid #73AD21;
}

3. Canh giữa hình ảnh

Thiết lập cho thẻ img các thuộc tính sau:

·         display:block

·         margin-left:auto

·         margin-right:auto

Ví dụ:

img {
    margin-left: auto;
    margin-left: auto;

    display: block;
}

<img src="hinh\linh.jpg">

4.    Dùng thuộc tính position để canh trái và phải

Ví dụ:

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

5.    Dùng thuộc tính float để canh trái và phải

Khi dùng thuộc tính float các bạn nhớ dùng kèm thuộc tính clear để chặn không cho phần tử kế tiếp nổi lên.

Ví dụ:

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

6.    Canh giữa theo chiều dọc – dùng padding

Ví dụ:

.center {
    padding: 70px 0;
    border: 3px solid green;
}

Nếu bạn kết hợp với thuộc tính text-align: center sẽ canh giữa chữ theo chiều dọc và ngang.

Ví dụ:

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

7.    Canh giữa theo chiều dọc – dùng line-height

Ví dụ:

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

/* Nếu là 01 đoạn văn có nhiều dòng, ta thêm các giá trị sau: */

.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

8.    Canh giữa theo chiều dọc – dùng position và transform

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%);
}

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Quay về MỤC LỤC TỰ HỌC CSS

Tác giả: #drM

Nguồn : Sưu Tầm