Cách để - hình ảnh trung tâm
Tìm hiểu làm thế nào để tập trung một hình ảnh với CSS.
Hình ảnh trung tâm:
Cách tập trung hình ảnh
Bước 1) Thêm HTML:Thí dụ
Bước 2) Thêm CSS:Để tập trung một hình ảnh, đặt lề trái và bên phải thành P.blocktext { margin-left: auto; margin-right: auto; width: 8em } ... <P class="blocktext">This rather...1 và biến nó thành một yếu tố P.blocktext { margin-left: auto; margin-right: auto; width: 8em } ... <P class="blocktext">This rather...2:
Thí dụ
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Bước 2) Thêm CSS:
Để tập trung một hình ảnh, đặt lề trái và bên phải thành P.blocktext { margin-left: auto; margin-right: auto; width: 8em } ... <P class="blocktext">This rather...1 và biến nó thành một yếu tố P.blocktext { margin-left: auto; margin-right: auto; width: 8em } ... <P class="blocktext">This rather...2:
.Center {& nbsp; Hiển thị: Khối; & nbsp; lề trái: tự động; & nbsp; Biên độ bên lề: Auto; & nbsp; Chiều rộng: 50%;} Go to our CSS Images Tutorial to learn more about how to style images.
Phong cách web Tấm CSS Mẹo & Thủ thuật
Xem thêm chỉ số của tất cả các mẹo.
Trung tâm dòng văn bản
Kiểu định tâm phổ biến nhất và (do đó) dễ nhất là các dòng văn bản trong một đoạn văn hoặc trong một tiêu đề. CSS có thuộc tính 'văn bản-align' cho điều đó:
P { text-align: center } H2 { text-align: center }Kết xuất từng dòng trong P hoặc trong một H2 tập trung giữa các lề của nó, như thế này:
Các dòng trong đoạn này đều tập trung giữa lề của đoạn văn, nhờ giá trị 'trung tâm' của thuộc tính CSS 'văn bản-align'.
Tập trung vào chế độ xem ở cấp CSS & NBSP; 3
Container mặc định cho các yếu tố hoàn toàn định vị 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, việc tập trung một yếu tố trong chế độ xem 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 } ... <P class="blocktext">This rather...Khối văn bản khá hẹp này là giữa. Lưu ý rằng các dòng bên trong khối không được tập trung (chúng được liên kết bên trái), không giống như trong ví dụ trước.
Đây cũng là cách để tập trung một hình ảnh: biến nó thành khối của riêng mình và áp dụng các thuộc tính ký quỹ cho nó. Ví dụ:
IMG.displayed { display: block; margin-left: auto; margin-right: auto } ... <IMG class="displayed" src="..." alt="...">Hình ảnh sau được tập trung:
Tập trung theo chiều dọc
CSS Cấp độ & NBSP; 2 không có tài sản để tập trung mọi thứ theo chiều dọc. Có lẽ sẽ có một ở cấp độ CSS & nbsp; 3 (xem bên dưới). Nhưng ngay cả trong CSS2, bạn có thể tập trung 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. Bí quyết là chỉ định rằng khối bên ngoài sẽ được định dạng thành một ô bảng, bởi vì nội dung của một ô bảng có thể được tập trung theo chiều dọc.
Ví dụ dưới đây tập trung một đoạn trong một khối có chiều cao nhất định. Một ví dụ riêng biệt cho thấy một đoạn văn được tập trung theo chiều dọc trong cửa sổ trình duyệt, bởi vì nó nằm trong một khối hoàn toàn có vị trí và cao như cửa sổ.
DIV.container { min-height: 10em; display: table-cell; vertical-align: middle } ... <DIV class="container"> <P>This small paragraph... </DIV>Đoạn nhỏ này được tập trung theo chiều dọc.
Định tâm theo chiều dọc theo cấp độ CSS & NBSP; 3
CSS Cấp & NBSP; 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ác khối trung tâm 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 chéo sẽ không phải là vấn đề trong tài liệu của bạn, bạn có thể sử dụng thuộc tính 'chuyển đổi' để tập trung một phần tử hoàn toàn có vị trí. Ví dụ:
Đoạn này là trung tâm theo chiều dọc.
Đối với một tài liệu trông như thế này:
<div class=container3> <p>This paragraph… </div>Bảng kiểu trông như thế này:
div.container3 { height: 10em; position: relative } /* 1 */ div.container3 p { margin: 0; position: absolute; /* 2 */ top: 50%; /* 3 */ transform: translate(0, -50%) } /* 4 */Các quy tắc thiết yếu là:
- Làm cho container tương đối định vị, tuyên bố nó là một container cho các yếu tố hoàn toàn được định vị.
- Làm cho các yếu tố hoàn toàn được định vị.
- Đặt nó xuống một nửa container với 'Top: 50%'. (Lưu ý rằng 50% 'ở đây có nghĩa là 50% chiều cao của container.)
- Sử dụng một 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' Dịch (0, -50%) 'đề cập đến chiều cao của chính phần tử.)
Gần đây (kể 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 'hiển thị'. Từ khóa này có nghĩa là để sử dụng trong giao diện người dùng đồ họa (GUI), nhưng không có gì ngă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 là trung tâm theo chiều dọc.
Bảng kiểu trông như thế này:
div.container5 { height: 10em; display: flex; align-items: center } div.container5 p { margin: 0 }Định tâm theo chiều dọc và chiều ngang ở cấp độ CSS & NBSP; 3
Chúng ta có thể mở rộng cả hai phương thức đến trung tâm 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 hoàn toàn được định vị là nó chỉ rộng như nó cần (trừ khi chúng ta cho nó một chiều rộng rõ ràng, tất nhiên). Trong ví dụ dưới đây, đó chính xác là những gì chúng tôi muốn: chúng tôi tập trung một đoạn văn chỉ với một từ (trung tâm!
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ả định cùng một dấu hiệu như trước:
<div class=container4> <p>Centered! </div>Bảng kiểu tương tự như ví dụ trước liên quan đến định tâm dọc. Nhưng bây giờ chúng ta cũng di chuyển phần tử nửa chừng trên container, với 'trái: 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':
div.container4 { height: 10em; position: relative } div.container4 p { margin: 0; background: yellow; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) }Ví dụ tiếp theo dưới đây giải thích lý do tại sao cần phải có lợi nhuận bên lề: -50%'.
Khi CSS Formatter hỗ trợ 'Flex', điều đó thậm chí còn dễ dàng hơn:
với bảng kiểu này:
div.container6 { height: 10em; display: flex; align-items: center; justify-content: center } div.container6 p { margin: 0 }tức là, bổ sung duy nhất là 'nội dung biện minh: trung tâm'. Giống như 'ALIGN-items' xác định sự liên kết dọc của nội dung của container, 'Justify-nội dung' xác định sự liên kết ngang. (Nó thực sự phức tạp hơn một chút, như tên của họ đề xuất, nhưng trong một trường hợp đơn giản, đó là cách nó hoạt động.) khả thi.
Tập trung vào chế độ xem ở cấp CSS & NBSP; 3
Container mặc định cho các yếu tố hoàn toàn định vị 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, việc tập trung một yếu tố trong chế độ xem 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 } ... <P class="blocktext">This rather...0Bạn có thể thấy kết quả trong một tài liệu riêng biệt.
'Ri -right: -50%' là cần thiết để bù đắp 'trái: 50%'. Quy tắc 'trái' làm giảm chiều rộng có sẵn cho phần tử xuống 50%. 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 container. Bằng cách nói rằng biên độ bên phải của phần tử nằm ở bên phải bởi cùng một lượng đó, chiều dài đường tối đa lại giống như chiều rộng của container.
Hãy thử thay đổi kích thước cửa sổ: Bạn sẽ thấy rằng 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 đối với toàn bộ câu, câu mới sẽ bị phá vỡ trên nhiều dòng. Khi bạn loại bỏ 'lề lề: -50%' và thay đổi kích thước lại cửa sổ, bạn sẽ thấy rằng các câu sẽ bị hỏng khi cửa sổ vẫn rộng gấp đôi so với các dòng văn bản.
.