Hình ảnh trung tâm CSS trong hình

Although it's not necessarily difficult, centering images on your web pages may be more involved than you think. The main reason is that the

Ghi chú

Đặt đoạn mã trên vào div có thể ảnh hưởng đến cách nó xuất hiện trên màn hình. Ví dụ: thêm mã vào div có lề phải sẽ thay đổi vị trí của hình ảnh ở giữa

Mẹo

Việc thêm một kiểu nội tuyến như được hiển thị ở trên chỉ nên được thực hiện một lần trong tài liệu. Nếu bạn cần căn giữa nhiều hình ảnh, hãy sử dụng đề xuất bên dưới và tạo một lớp CSS để giúp giảm mã thừa và tăng tốc trang web của bạn

Ví dụ về trung tâm hình ảnh sử dụng mã trên

Chuyển đổi thành phần tử cấp khối

One way you can properly center images is to define the

Using the tag

Bạn có thể căn giữa ảnh bằng cách bao quanh

Định tâm theo chiều dọc

CSS cấp 2 không có thuộc tính để căn giữa mọi thứ theo chiều dọc. Có thể sẽ có một trong CSS cấp 3 (xem bên dưới). Nhưng ngay cả trong CSS2, bạn có thể căn giữa các khối theo chiều dọc bằng cách kết hợp một vài thuộc tính. Mẹo nhỏ là chỉ định rằng khối bên ngoài sẽ được định dạng là ô của bảng, vì nội dung của ô bảng có thể được căn giữa theo chiều dọc

Ví dụ dưới đây căn giữa một đoạn bên trong một khối có chiều cao nhất định. Một ví dụ riêng hiển thị một đoạn văn được căn giữa theo chiều dọc trong cửa sổ trình duyệt, bởi vì nó nằm trong một khối được định vị tuyệt đối và cao bằng cửa sổ

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...

  
This small paragraph...

Đoạn nhỏ này được căn giữa theo chiều dọc

Căn giữa theo chiều dọc ở CSS cấp 3

CSS cấp 3 cung cấp các khả năng khác. Tại thời điểm này (2014), một cách tốt để căn giữa các khối theo chiều dọc mà không sử dụng định vị tuyệt đối (có thể gây ra văn bản chồng chéo) vẫn đang được thảo luận. Nhưng nếu bạn biết rằng văn bản chồng lấp sẽ không thành vấn đề trong tài liệu của mình, thì bạn có thể sử dụng thuộc tính 'transform' để căn giữa một phần tử được định vị tuyệt đối. Ví dụ

Đoạn này được căn giữa theo chiều dọc

Đối với một tài liệu trông như thế này

  
This paragraph…

biểu định kiểu trông như thế này

Các quy tắc thiết yếu là

1. Làm cho vùng chứa được định vị tương đối, tuyên bố nó là vùng chứa cho các phần tử được định vị tuyệt đối
2. Làm cho phần tử tự định vị tuyệt đối
3. Đặt nó ở giữa thùng chứa với 'trên cùng. 50%'. (Lưu ý rằng 50%' ở đây có nghĩa là 50% chiều cao của vùng chứa. )
4. Sử dụng bản dịch để di chuyển phần tử lên một nửa chiều cao của chính nó. ('50%' trong 'translate(0, -50%)' đề cập đến chiều cao của chính phần tử đó. )

Gần đây (từ khoảng năm 2015), một kỹ thuật khác cũng đã có sẵn trong một số triển khai CSS. Nó dựa trên từ khóa 'flex' mới cho thuộc tính 'display'. Từ khóa này được dùng để sử dụng trong giao diện đồ họa người dùng (GUIs), nhưng không có gì ngăn cản bạn sử dụng nó trong tài liệu, nếu tài liệu đó có cấu trúc phù hợp

Đoạn này được căn giữa theo chiều dọc

biểu định kiểu trông như thế này

div.container5 {
  height: 10em;
  display: flex;
  align-items: center }
div.container5 p {
  margin: 0 }

Căn giữa theo chiều dọc và chiều ngang trong CSS cấp 3

Chúng ta có thể mở rộng cả hai phương pháp để căn giữa theo chiều ngang và chiều dọc cùng một lúc

Một tác dụng phụ của việc làm cho đoạn văn được định vị tuyệt đối là sau đó nó chỉ rộng ở mức cần thiết (tất nhiên trừ khi chúng ta cung cấp cho nó một chiều rộng rõ ràng). Trong ví dụ dưới đây, đó chính xác là những gì chúng tôi muốn. Chúng tôi căn giữa một đoạn văn chỉ bằng một từ (“Centered. ”), vì vậy chiều rộng của đoạn phải chính xác bằng chiều rộng của từ đó

Nền màu vàng ở đó để cho thấy rằng đoạn văn thực sự chỉ rộng bằng nội dung của nó. Chúng tôi giả sử đánh dấu tương tự như trước đây

Biểu định kiểu tương tự như ví dụ trước đối với định tâm dọc. Nhưng bây giờ chúng ta cũng di chuyển phần tử qua nửa vùng chứa, với 'left. 50%', đồng thời di chuyển nó sang trái một nửa chiều rộng của chính nó trong phép biến đổi 'dịch'

Ví dụ tiếp theo bên dưới giải thích tại sao 'lề-phải. -50%' là cần thiết

Khi trình định dạng CSS hỗ trợ 'flex', điều đó thậm chí còn dễ dàng hơn

với biểu định kiểu này

i. e. , phần bổ sung duy nhất là 'justify-content. trung tâm'. Giống như 'align-items' xác định căn chỉnh theo chiều dọc của nội dung vùng chứa, 'justify-content' xác định căn chỉnh theo chiều ngang. (Nó thực sự phức tạp hơn một chút, như tên của chúng gợi ý, nhưng trong một trường hợp đơn giản thì đó là cách nó hoạt động. ) Một tác dụng phụ của 'flex' là phần tử con, chữ P trong trường hợp này, được tự động làm nhỏ nhất có thể

Căn giữa trong chế độ xem ở CSS cấp 3

Vùng chứa mặc định cho các phần tử được định vị tuyệt đối là chế độ xem. (Trong trường hợp trình duyệt, điều đó có nghĩa là cửa sổ trình duyệt). Vì vậy, căn giữa một phần tử trong khung nhìn rất đơn giản. Đây là một ví dụ hoàn chỉnh. (Ví dụ này sử dụng cú pháp HTML5. )

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 8em
}
...
This rather...

Bạn có thể xem kết quả trong một tài liệu riêng

'lề-phải. -50%' là cần thiết để bù cho 'trái. 50%'. Quy tắc 'trái' giảm 50% chiều rộng có sẵn cho phần tử. Do đó, trình kết xuất sẽ cố gắng tạo các đường không dài hơn một nửa chiều rộng của vùng chứa. Bằng cách nói rằng lề phải của phần tử nằm xa hơn về bên phải cùng một lượng đó, độ dài dòng tối đa lại bằng với chiều rộng của vùng chứa

Hãy thử thay đổi kích thước cửa sổ. Bạn sẽ thấy mỗi câu nằm trên một dòng khi cửa sổ đủ rộng. Chỉ khi cửa sổ quá hẹp so với cả câu thì câu mới bị ngắt quãng vài dòng. Khi bạn xóa 'lề phải. -50%' và thay đổi kích thước cửa sổ một lần nữa, bạn sẽ thấy rằng các câu sẽ bị ngắt khi cửa sổ vẫn rộng gấp đôi dòng văn bản

(Việc sử dụng 'dịch' để định tâm trong chế độ xem lần đầu tiên được đề xuất bởi “Charlie” trong một câu trả lời trên Stack Overflow. )