Căn vị trí trong CSS - CSS Align

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    7 thg 11, 2022

  • Số lượt xem

    265 lượt xem


CSS Align là các cách phổ biến dùng để căn chỉnh vị trí các element.

Center Align Elements

Để căn giữa một element block theo chiều ngang (như <div>), hãy sử dụng margin: auto;

Đặt chiều rộng của element sẽ ngăn element kéo dài ra các cạnh của container.

Sau đó, element sẽ chiếm chiều rộng được chỉ định và không gian còn lại sẽ được chia đều giữa hai bên:

.center {    margin: auto;    width: 50%;    border: 3px solid green;    padding: 10px;  }

Lưu ý: Căn giữa không có hiệu lực nếu thuộc tính width không được đặt (hoặc được đặt thành 100%).

Center Align Text

Để chỉ căn giữa văn bản bên trong một element, hãy sử dụng text-align: center;

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

 

Center Align Image

Để căn giữa một hình ảnh, hãy đặt marign left và right thành auto và biến nó thành một element block:

img {    display: block;    margin-left: auto;    margin-right: auto;    width: 40%;  }

 

Left và Right Align - Sử dụng position

Một phương pháp để căn chỉnh các element là sử dụng position: absolute;:

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

 

Left và Right Align - Sử dụng float

Một phương pháp khác để căn chỉnh các element là sử dụng thuộc tính float:

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

 

Center Vertically - Sử dụng padding

Có nhiều cách để căn giữa một element theo chiều dọc trong CSS. Một giải pháp đơn giản là sử dụng padding top và bottom:

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

Để căn giữa theo cả chiều dọc và chiều ngang, hãy sử dụng paddingtext-align: center:

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

 

Center Vertically - Sử dụng line-height

Một mẹo khác là sử dụng thuộc tính line-height với giá trị bằng 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;  }

 

Center Vertically - Sử dụng position & transform

Nếu paddingline-height không phải là tùy chọn, thì một giải pháp khác là sử dụng position 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%);  }

 

Center Vertically - Sử dụng Flexbox

Bạn cũng có thể sử dụng flexbox để căn giữa mọi thứ. Chỉ cần lưu ý rằng flexbox không được hỗ trợ trong IE10 và các phiên bản trước đó:

.center {    display: flex;    justify-content: center;    align-items: center;    height: 200px;    border: 3px solid green;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.