căn chỉnh phần tử trong css

Phần tử căn giữa theo chiều dọc và ngang     

Các yếu tố căn giữa


Để căn giữa theo chiều ngang một phần tử khối (như <div>), chúng ta sử dụng thuộc tính margin:auto;

Thuộc tính width được sử dụng để đặt chiều rộng cho một phần tử khối. Khi đó, phần tử 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 lề margin.

Phần tử <div> này được căn giữa

 

Ví dụ

<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid blue;
  padding: 10px;
}
</style>

Xem kết quả

Căn giữa văn bản


Để căn giữa văn bản bên trong một phần tử HTML, chúng ta hãy sử dụng thuộc tính text-align:center.

Văn bản này được căn giữa

Ví dụ

<style>
.center {
  text-align: center;
  border: 3px solid blue;
}
</style>

Xem kết quả

Căn giữa hình ảnh


Để căn giữa một hình ảnh, chúng ta hãy đặt margin-leftmargin-rightauto và sử dụng thuộc tính display:block để chuyển đổi phần tử <img> thành một phần tử khối.

css align

Ví dụ

<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>

Xem kết quả

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


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

Trong những năm tôi còn trẻ và dễ bị tổn thương hơn, cha tôi đã cho tôi một số lời khuyên mà tôi luôn ghi nhớ trong tâm trí kể từ đó.

 

Ví dụ

<style>
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid blue;
  padding: 10px;
}
</style>

Xem kết quả

Lưu ý: Các phần tử có vị trí tuyệt đối bị xóa khỏi luồng thông thường và có thể xếp chồng chéo lên các phần tử khác.

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. Một giải pháp đơn giản là sử dụng padding topbottom.

Tôi được căn giữa theo chiều dọc

Ví dụ

<style>
.center {
  padding: 50px 0;
  border: 3px solid blue;
}
</style>

Xem kết quả

Để căn giữa theo cả chiều dọc và chiều ngang, chúng ta sử dụng thuộc tính paddingtext-align:center

Tôi được căn giữa theo chiều dọc và chiều ngang

Ví dụ

<style>
.center {
  padding: 70px 0;
  border: 3px solid blue;
  text-align: center;
}
</style>

Xem kết quả