Căn lề cho một khối trong HTML bằng CSS, căn giữa cho khối, căn trái cho khối, căn phải cho khối, CSS Align

Căn lề cho một khối trong HTML bằng CSS, căn giữa cho khối, căn trái cho khối, căn phải cho khối, CSS Align

Cách căn lề cho phần tử khối trong CSS

Căn lề cho phần tử khối (Block element)

Một phần tử khối sẽ có chiều rộng chiếm toàn bộ chiều rộng của phần tử chứa nó, và sẽ có ngắt xuống dòng ở cả trước và sau của khối.

Ví dụ, dưới đây là các thẻ tạo phần tử khối:

  • <div>
  • <p>
  • <h1> - <h6>
  • ....

Ở bài này, tôi sẽ hướng dẫn bạn làm thế nào để căn lề cho một khối, việc này rất có ích trong việc thiết kế Layout.

Để căn lề cho cho văn bản trong khối thì bạn vui lòng xem lại bài CSS Text

Căn giữa sử dụng thuộc tính margin

Một phần tử khối (Block element) có thể được căn giữa bằng cách thiết lập thuộc tính margin-leftmargin-rightauto.

Ví dụ

div{
    margin-left: auto;
    margin-right: auto;
}
Bạn sẽ không nhìn thấy rõ một phần tử khối được căn giữa nếu chiều rộng của nó là 100%

Căn trái và căn phải sử dụng thuộc tính position

Một cách khác để căn trái và căn phải cho phần tử khối là sử dụng thuộc tính position: absolute;

Ví dụ

div {
    position: absolute;
    right: 0px;
    width: 350px;
    border: 1px solid black;
    padding: 10px;
}
Khi căn lề cho phần tử khối bằng thuộc tính position, bạn cần phải xác định margin và padding của thẻ phần tử <body>. Điều này giúp tránh sự khác biệt trực quan của các loại trình duyệt khác nhau.
Ví dụ

body{
    margin:0px;
    padding:0px;
}
div.container{
    position: relative;
    width: 100%;
}
div.right{
    position: absolute;
    right: 0px;
    width: 350px;
    border: 1px solid black;
    padding: 10px;
}
Khi sử dụng thuộc tính position:absolute nó sẽ làm thay đổi dòng chảy bình thường của các phần tử khác, bạn có thể ôn lại bài CSS Position để rõ hơn.

Căn trái và căn phải sử dụng thuộc tính float

Một cách khác để căn trái và căn phải cho phần tử khối là sử dụng thuộc tính float

Ví dụ

div{
    float: right;
    width: 350px;
    border: 1px solid black;
    padding: 10px;
}
Khi căn lề cho phần tử khối bằng thuộc tính float, bạn cần phải xác định margin và padding của thẻ phần tử <body>. Điều này giúp tránh sự khác biệt trực quan của các loại trình duyệt khác nhau.
Ví dụ

body {
    margin: 0;
    padding: 0;
}
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
Đối với việc căn lề bằng thuộc tính position và float, bạn cần phải thêm <!DOCTYPE html> vào đầu tập tin, để đảm bảo các trình duyệt đều hiển thị như nhau.

Cách căn lề cho phần tử khối trong CSS

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi