Lập trình CSS - Canh chỉnh ngang và dọc

phần tử được canh giữa

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

canh giữa phần tử

Để làm cho phần tử khối (ví dụ: <div>) được canh giữa theo chiều ngang, hãy sử dụng margin: auto;.

Thiết lập độ rộng của phần tử sẽ ngăn chặn nó mở rộng đến cạnh của khung.

Sau đó, phần tử sẽ chiếm宽度 đã chỉ định, và không gian còn lại sẽ được phân phối đều giữa hai khoảng cách biên:

phần tử div này được canh giữa.

Example

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  khoảng cách lấp đầy: 20px;
}

Try it yourself

Lưu ý:Nếu chưa được thiết lập width thuộc tính (hoặc đặt nó là 100％), canh giữa sẽ không có hiệu lực.

canh giữa văn bản

Nếu chỉ cần canh giữa văn bản trong phần tử, hãy sử dụng canh văn bản: giữa;:

văn bản này được canh giữa.

Example

.center {
  canh văn bản: giữa;
  border: 3px solid green;
}

Try it yourself

Tip:Để xem thêm các ví dụ về cách canh lề văn bản, xin xem CSS văn bản chương này.

canh giữa hình ảnh

Nếu cần canh giữa hình ảnh, hãy đặt khoảng cách biên bên trái và bên phải là autovà đặt nó thành yếu tố khối:

Example

img {
  hiển thị: khối;
  khoảng cách trái: tự động;
  khoảng cách phải: tự động;
  chiều rộng: 40%;
}

Try it yourself

canh trái và phải - sử dụng chỉnh vị trí

một cách khác để canh các yếu tố là sử dụng chỉnh vị trí: tuyệt đối; :

div này là canh phải.

Example

.right {
  chỉnh vị trí: tuyệt đối;
  phải: 0px;
  chiều rộng: 300px;
  biên viền: 3px vạch ngang #73AD21;
  khoảng cách lấp đầy: 20px;
}

Try it yourself

Lưu ý:yếu tố chỉnh vị trí tuyệt đối sẽ bị loại bỏ khỏi luồng bình thường và có thể xảy ra trùng lấp yếu tố.

canh trái và phải - sử dụng trôi nổi

một cách khác để canh các yếu tố là sử dụng trôi nổi Thuộc tính:

Example

.right {
  trôi nổi: phải;
  chiều rộng: 300px;
  biên viền: 3px vạch ngang #73AD21;
  khoảng cách lấp đầy: 10px;
}

Try it yourself

Lưu ý:nếu một yếu tố cao hơn yếu tố bao gồm nó và nó là trôi nổi, nó sẽ tràn ra ngoài容器 của nó. Bạn có thể sử dụng clearfix hack để giải quyết vấn đề này (xin xem ví dụ dưới đây).

clearfix Hack

thì chúng ta có thể thêm vào yếu tố bao gồm quá tải: tự động;để giải quyết vấn đề này:

Example

.clearfix {
  quá tải: tự động;
}

Try it yourself

canh ngang thẳng đứng - sử dụng khoảng cách lấp đầy

Có rất nhiều cách để canh ngang thẳng đứng các yếu tố trong CSS. Một giải pháp đơn giản là sử dụng khoảng cách trong và ngoài:

Tôi là thẳng đứng ở giữa.

Example

.center {
  khoảng cách lấp đầy: 70px 0;
  border: 3px solid green;
}

Try it yourself

Nếu cần canh ngang và thẳng đứng cùng một lúc, hãy sử dụng khoảng cách lấp đầy và canh văn bản: giữa;:

I am horizontally and vertically centered.

Example

.center {
  khoảng cách lấp đầy: 70px 0;
  border: 3px solid green;
  canh văn bản: giữa;
}

Try it yourself

canh ngang thẳng đứng - sử dụng chiều cao dòng

một kỹ thuật khác là sử dụnggiá trị của nóbằng chiều cao giá trị thuộc tính của chiều cao dòng Thuộc tính:

I am horizontally and vertically centered.

Example

.center {
  chiều cao dòng: 200px;
  height: 200px;
  border: 3px solid green;
  canh văn bản: giữa;
}
/* Nếu có nhiều dòng văn bản, hãy thêm mã sau: */
.center p {
  chiều cao dòng: 1.5;
  hiển thị: nội tuyến - khối;
  canh ngang thẳng đứng: giữa;
}

Try it yourself

canh ngang thẳng đứng - sử dụng position và transform

nếu lựa chọn của bạn không phải là khoảng cách lấp đầy và chiều cao dòngnếu vậy giải pháp khác là sử dụng chỉnh vị trí và transform Thuộc tính:

I am horizontally and vertically centered.

Example

.center { 
  height: 200px;
  chỉnh vị trí: tương đối;
  border: 3px solid green; 
}
.center p {
  khoảng cách: 0;
  chỉnh vị trí: tuyệt đối;
  đầu: 50%;
  trái: 50%;
  transform: di chuyển(-50%, -50%);
}

Try it yourself

Tip:You will be in 2D Transformation In this chapter, learn more about the transform attribute.

Vertical Alignment - Using Flexbox

You can also use flexbox to center content. Note that IE10 and earlier versions do not support flexbox:

I am horizontally and vertically centered.

Example

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

Try it yourself

Tip:You will be in my CSS Flexbox You will learn more about Flexbox in this chapter.