Căn chỉnh hình ảnh vào giữa html. Sử dụng CSS để căn giữa hình ảnh và các đối tượng HTML khác

Sử dụng CSS là tốt nhất Cách tốt nhất có thể căn giữa hình ảnh, khối văn bản và thậm chí toàn bộ thiết kế trang web. Hầu hết các thuộc tính để căn chỉnh HTML đã có sẵn trong CSS kể từ phiên bản 1.0. Chúng hoạt động tốt với CSS3 và các trình duyệt web hiện đại:

Sử dụng CSS để căn giữa trong HTML

Định tâm với sử dụng CSS có thể là một thách thức đối với các nhà thiết kế web mới. Có nhiều cách để làm điều này, nhưng không phải tất cả chúng đều áp dụng được cho mọi phần tử.

CSS có thể được sử dụng để:

văn bản trung tâm;
Căn giữa một phần tử khối (chẳng hạn như div);
Căn giữa hình ảnh;
Căn giữa theo chiều dọc một khối hoặc hình ảnh.

Nhiều năm trước, các nhà thiết kế web có thể sử dụng điều này để căn giữa hình ảnh và văn bản. Nhưng thẻ này hiện không được dùng nữa và không còn được hỗ trợ. trình duyệt hiện đại. Điều này là do các trang web hiện đại phải có sự tách biệt rõ ràng về cấu trúc và phong cách.

HTML được sử dụng để tạo cấu trúc và CSS xác định kiểu. Vì định tâm là một đặc điểm trực quan nên nó đạt được bằng cách sử dụng các kiểu xếp tầng.

Căn giữa văn bản bằng CSS

Cách dễ nhất là căn giữa văn bản trên trang web. Để làm điều này, bạn chỉ cần một thuộc tính: HTML căn chỉnh văn bản :

p.center ( text-align: center; )

Với dòng mã này, mỗi đoạn văn có lớp trung tâm sẽ được căn giữa theo chiều ngang trong phần tử cha của nó.

Các ứng dụng của lớp này:

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

Khi căn giữa văn bản bằng thuộc tính text-align, hãy nhớ rằng nó sẽ được căn giữa trong vùng chứa nó và không nhất thiết phải liên quan đến toàn bộ trang.

Căn giữa các khối nội dung bằng CSS

Khối là bất kỳ thành phần nào trên trang được đặt làm thành phần cấp khối và có chiều rộng cụ thể. Thông thường các khối như vậy được tạo bằng cách sử dụng .

Cách phổ biến nhất để căn giữa các hộp là đặt phần đệm bên trái và bên phải thành auto :

div.center ( lề: 0 tự động; chiều rộng: 80em; )

Đây là dạng rút gọn thuộc tính lề sẽ đặt phần đệm trên cùng và dưới cùng thành 0 và phần đệm bên trái và bên phải sẽ sử dụng giá trị auto . Điều này chiếm toàn bộ không gian có sẵn và chia đều cho hai bên, tương đương với căn chỉnh div HTML.

Ứng dụng trong HTML:

Toàn bộ khối này được căn giữa nhưng văn bản bên trong nó được căn trái.

Bởi vì khối có chiều rộng cụ thể nên nó sẽ được căn giữa trong phần tử chứa nó. Văn bản trong khối này sẽ không được căn chỉnh ở giữa mà ở bên trái. Bởi vì theo mặc định trong các trình duyệt, văn bản được căn lề trái. Để làm cho văn bản được căn giữa, hãy sử dụng thuộc tính text-align mà chúng tôi đã mô tả trước đó.

Căn giữa hình ảnh bằng CSS

Hầu hết các trình duyệt sẽ hiển thị hình ảnh ở giữa khi sử dụng Thuộc tính HTML căn chỉnh văn bản. Nhưng bạn không nên dựa vào phương pháp này vì nó không được W3C khuyến nghị.

Thay vào đó, bạn nên thông báo rõ ràng cho trình duyệt rằng hình ảnh là thành phần cấp khối. Đây là mã CSS cho việc này:

img.center ( display: block; lề trái: auto; lề phải: auto; )

Đây là mã HTML cho hình ảnh cần được căn giữa:

Cũng có thể căn giữa các đối tượng bằng CSS nội tuyến:

Căn giữa các phần tử theo chiều dọc bằng CSS

HTML căn dọc luôn là một vấn đề trong thiết kế web, nhưng với việc phát hành đặc tả Mô-đun bố cục hộp linh hoạt CSS trong CSS3, đã có giải pháp cho vấn đề này.

Căn chỉnh dọc hoạt động giống như căn chỉnh ngang được mô tả ở trên. Thuộc tính căn chỉnh dọc có giá trị ở giữa:

Vcenter ( căn chỉnh dọc: giữa; )

Nhược điểm của phương pháp này là không phải tất cả các trình duyệt đều hỗ trợ CSS FlexBox. Nếu có vấn đề với các phiên bản trình duyệt cũ hơn, W3C khuyên bạn nên căn giữa văn bản theo chiều dọc trong vùng chứa bằng phương pháp sau:

Đặt các phần tử bạn muốn căn giữa bên trong phần tử vùng chứa, chẳng hạn như div ;
Đặt chiều cao tối thiểu cho phần tử vùng chứa;
Khai báo một phần tử chứa;
Đặt căn chỉnh dọc HTML thành giữa .

Ví dụ:

Vcenter ( chiều cao tối thiểu: 12em; hiển thị: ô bảng; căn dọc: giữa; )

Mã HTML:

Văn bản này được căn giữa theo chiều dọc trong hộp.

Định tâm dọc và phiên bản đầu trình duyệt web IE

Có một số cách để đưa IE vào giữa các đối tượng và sau đó sử dụng bình luận có điều kiện. Tin tốt là do quyết định gần đây của Microsoft về việc ngừng hỗ trợ các phiên bản IE cũ hơn, các trình duyệt này sẽ sớm biến mất, giúp các nhà thiết kế web sử dụng các phương pháp đánh dấu hiện đại như CSS FlexBox dễ dàng hơn.

Bản dịch của bài viết “Sử dụng CSS để căn giữa hình ảnh và các đối tượng HTML khác” được nhóm dự án thân thiện chuẩn bị.

Tốt xấu

Nhiệm vụ

Căn chỉnh ảnh và chú thích theo chiều ngang trên trang web.

Giải pháp

Hình ảnh minh họa kèm theo văn bản thường được căn giữa trang web, văn bản xuất hiện trước và sau hình ảnh. Sự sắp xếp các phần tử này cho phép bạn phá vỡ văn bản lớn trên các khối ngữ nghĩa và thu hút sự chú ý đến các hình vẽ.

Đầu tiên, chúng ta hãy xem việc căn chỉnh hình ảnh vào giữa. Để thực hiện việc này, hãy thêm thuộc tính kiểu căn chỉnh văn bản có tâm giá trị vào bộ chọn P. Trong trường hợp này thẻ phải được đặt bên trong một đoạn văn (thẻ

). Để ngăn tất cả các đoạn văn trên trang được căn giữa, hãy giới thiệu lớp fig của chúng tôi và thực hiện tất cả các hành động với nó. Ví dụ 1 cho thấy cách thực hiện việc này.

Ví dụ 1: Sử dụng căn chỉnh văn bản

HTML5 CSS 2.1 IE Cr Op Sa Fx

Căn chỉnh ảnh vào giữa .fig ( text-align: center; /* Align to center */ )

Văn bản trước hình ảnh

Văn bản nối tiếp hình ảnh

Kết quả ví dụ này thể hiện trong hình. 1.

Cơm. 1. Hình ảnh được căn giữa trên trang web

Bạn cũng có thể thêm chú thích vào ảnh. Văn bản phải được đặt ngay sau hình ảnh và căn giữa tương tự. Mọi thứ ở đây đều đơn giản, hãy sử dụng lại lớp của chúng ta nhưng áp dụng nó vào thẻ. Để làm cho văn bản chữ ký có hình thức khác với các đoạn thông thường, hãy in nghiêng và đánh dấu bằng màu khác (ví dụ 2).

Ví dụ 2. Chú thích ảnh

HTML5 CSS 2.1 IE Cr Op Sa Fx

Ảnh có chú thích .fig ( display: block; /* Phần tử khối (đối với các trình duyệt cũ hơn) */ text-align: center; /* Căn giữa */ font-style: italic; /* Italic */ Margin-top: 0; /* Lề trên */ lề-dưới: 5px; /* Lề dưới */ màu: #666; /* Màu chú thích */ ) document.createElement("figure"); document.createElement("figcaption"); Thượng cổ tạo ra lửa. Nhưng bề mặt mặt trăng ở phía sau là gì? Không, nó không đơn giản như vậy.

Kết quả của ví dụ này được hiển thị trong Hình. 2.

Cơm. 2. Chữ ký dưới ảnh

Đối với khối có ảnh, thẻ được sử dụng và đối với chú thích của nó, thẻ được sử dụng. Các phiên bản IE cũ hơn không hiểu các thẻ này nên một tập lệnh nhỏ được thêm riêng cho chúng.

Tôi thích giải quyết các vấn đề thú vị về bố cục và với kinh nghiệm của tôi trong lĩnh vực này trong hơn 5 năm, những vấn đề như vậy không thường xuyên xảy ra.
Gần đây tôi gặp phải một số vấn đề như vậy cùng một lúc: 1. Căn giữa hình ảnh vào giữa trang và nén nó khi thay đổi kích thước trình duyệt. Về nguyên tắc, cả nhiệm vụ thứ nhất và thứ hai đều có thể được giải quyết bằng cách sử dụng javascript nhỏ, nhưng tôi muốn thực hiện điều đó một cách khôn ngoan bằng cách sử dụng html+css.
Nhiệm vụ này cũng trở nên dễ dàng hơn do trang web sử dụng tính năng này đã được phát triển như một trang hiện đại và hỗ trợ bị giới hạn ở ie9+, FF, Chrome, Safari, Opera. 2. Định tâm tuyệt đối hình ảnh bất kể kích thước cửa sổ trình duyệt. Nhưng tôi đã phải mày mò với điều này. Ý tưởng ban đầu là thế này:

.wrapper( tràn: ẩn; vị trí: cố định; trên cùng: 0; phải: 0; dưới cùng: 0; trái: 0; ) .item( vị trí: tuyệt đối; trên cùng: 50%; trái: 50%; hiển thị: khối nội tuyến ; ) .item img( lề: -50% 0 0 -50%; )

Ý tưởng này dựa trên logic sau:

Một khối bên ngoài, .wrapper, được kéo dài đến hết chiều rộng và chiều cao tự do.
Khối bên trong, .item, lấy chiều rộng và chiều cao của hình ảnh nằm bên trong, vì nó là khối nội tuyến; và được đặt ở góc trên bên trái ở giữa khối cha.
Đặt hình ảnh ở lề trừ, đáng lẽ phải căn chỉnh hình ảnh chính xác vào giữa .wrapper

Nhưng một ý tưởng hoàn toàn hợp lý đã bị gián đoạn bởi một sự phụ thuộc thậm chí còn hợp lý hơn. Khoảng đệm 50% được tính dựa trên một nửa chiều cao hoặc chiều rộng của phần tử gốc. Trong trường hợp của tôi, chiều rộng và chiều cao của phần gốc dựa trên chiều rộng và chiều cao của hình ảnh và sau khi hình ảnh được dịch chuyển -50%, phần gốc, .item, cũng giảm đi 50% tương tự và hình tròn được thay đổi đóng cửa.

Tôi đã quyết định điều này bằng cách ghi nhớ biến đổi, hay chính xác hơn là chức năng dịch của nó, có vẻ như thay đổi cách hiển thị của một đối tượng, nhưng vẫn giữ nguyên vị trí của nó. Và hóa ra là bằng cách thay thế lề của hình ảnh bằng Transform: Translate(-50%, -50%); vấn đề được giải quyết ngay lập tức. Và đây là những gì xuất hiện ở cuối:

*( đệm: 0; lề: 0; căn chỉnh dọc: trên cùng; ) html, body( chiều rộng: 100%; chiều cao: 100%; ) .wrapper( tràn: ẩn; vị trí: cố định; trên cùng: 0; phải: 0 ; dưới cùng: 0; bên trái: 0; ) .item( vị trí: tuyệt đối; trên cùng: 50%; bên trái: 50%; hiển thị: khối nội tuyến; ) .item img( -webkit-transform: dịch(-50%, - 50%); -moz-transform: dịch(-50%, -50%); biến đổi: dịch(-50%, -50%); )

Tái bút: Tôi không chắc liệu đây có phải là những lựa chọn duy nhất hay không. Tôi không nghĩ những lựa chọn này phù hợp với tất cả mọi người.
Nhưng tôi biết chắc rằng nếu họ phù hợp với trường hợp của tôi thì sẽ có những người mà họ có thể sẽ rất hữu ích trong nhiệm vụ của mình. Ngoài ra, nếu bạn thêm một chút vào mã, bạn có thể thêm nạng cho IE cũ hơn, tôi không thêm nó vì tôi không muốn làm hỏng mã sạch vì lợi ích của các trình duyệt quá lỗi thời.
PS2: Những lời phê bình và lời khuyên đều rất được hoan nghênh. Cảm ơn bạn đã đọc đến cuối.

Tags: html, css, css3, hình ảnh, hình ảnh, hình ảnh, căn chỉnh, căn dọc

Tính năng: Cài đặt: Cách sử dụng: Ảnh chụp màn hình: Nơi tải xuống ELinks là một nỗ lực nhằm tạo ra một trình duyệt web dựa trên văn bản hiện đại. Dự án bắt đầu từ mã trình duyệt Links. Mục tiêu ban đầu của anh ấy là cố gắng triển khai một số tính năng ít nhiều bị thiếu/yếu trong Liên kết. Chữ "E" trong "ELinks" đến từ đâu - "Thử nghiệm" / "Thử nghiệm". Sau thành công của những nỗ lực này, chữ "E" được hiểu là "Mở rộng" hoặc "Nâng cao". Khi trình duyệt Liên kết đạt tới đến một mức độ nhất định tính hoàn chỉnh, vượt trội ở một số khía cạnh so với web tiên tiến nhất lúc bấy giờ Trình duyệt Lynx, sự phát triển tiếp theo của nó đang ở ngã ba đường: hướng tới hiển thị đồ họa và hơn thế nữa là văn bản thuần túy hoặc nâng cao khả năng lướt web bằng cách sử dụng giao diện văn bản người dùng vượt quá giới hạn mà Lynx đạt được trước tiên và sau đó là Liên kết - trong khi vẫn duy trì trong chế độ văn bản. Hướng đầu tiên được triển khai ở phiên bản Links có khả năng hiển thị nội dung đồ họa của các trang web - Links2. Thứ hai là trình duyệt web ELinks. Lynx đã và vẫn là một mô hình phát triển rất tốt phần mềm thuộc loại riêng của nó. Các tác giả của nó đã hình thành và triển khai một khái niệm rất chu đáo và kỹ lưỡng về duyệt web dựa trên văn bản, với những quy ước và trừu tượng đặc biệt giúp khắc phục nhiều hạn chế và nhược điểm của việc lướt web dựa trên văn bản và tạo ra một thế giới rất khác với phần đồ họa đang mở rộng nhanh chóng. của Internet. Nhưng HTML và máy tính đã phát triển hơn nữa, các ngôn ngữ kịch bản bắt đầu lan rộng, toàn bộ thế giới trình bày, tìm kiếm và tiêu thụ thông tin đã tiến lên và thay đổi. Những cơ hội mới đã xuất hiện. Nhiều tính năng trong số này đã được triển khai trong Liên kết, nhưng những thay đổi sau đây trong đại diện trực quan thông tin trong các tài liệu web - từ thêm HTML có thêm CSS - những con đường mới đã được mở ra; ngay cả khi vẫn ở chế độ văn bản. Và họ cố gắng triển khai điều này trong ELinks: hỗ trợ hiển thị màu trong trình mô phỏng thiết bị đầu cuối hỗ trợ tính năng này, định vị một chút bằng CSS và thậm chí một số loại hỗ trợ JavaScript / ECMAScript. Mặt kỹ thuật công nghệ mạng(như hỗ trợ SSL) và hỗ trợ mã hóa khác nhau văn bản đã khá mạnh mẽ trong trình duyệt Liên kết, nhưng trong ELinks, một số tính năng đã được cải thiện và các tính năng khác được phát triển hơn. ELinks là một bước tiến trong khái niệm trình duyệt web bảng điều khiển, biến ELinks trở thành ví dụ tiên tiến nhất về việc triển khai nó. Mặc dù Lynx vẫn giữ vị trí của mình khá tốt. Khái niệm xem các trang web ở chế độ văn bản, mặc dù nó là một sự đơn giản hóa, một cách tiếp cận đặc biệt để trình bày và xử lý thông tin, thay vì cố gắng giống với môi trường của trình duyệt đồ họa, hoạt động khá tốt. Các tài liệu web ngày càng trở nên phức tạp hơn và (với tất cả những hạn chế không thể tránh khỏi khi xem các trang web ở chế độ văn bản) đi theo một con đường cụ thể trong việc xử lý chúng theo cách mà các đối thủ cố gắng giống như các trình duyệt web chính thống, có đồ họa, đầy đủ tính năng. máy tính để bàn. Điều này tương tự như vấn đề nan giải của trình duyệt đối với thiêt bị di động mơ màn hình lớn: Cố gắng bắt chước máy tính có màn hình lớn hoặc chuyển đổi tài liệu web được hiển thị cho phù hợp với đặc điểm của môi trường. Trình duyệt văn bản chủ yếu được sử dụng trên các máy tính có ít nhiều màn hình lớn, do đó có ít hạn chế về kích thước hơn và nhiều cám dỗ hơn: Lynx giữ mức độ thấp, ELinks để đẩy các giới hạn. Khả năng Mạng văn bản browser. Các phiên bản dành cho Linux, các hệ thống *nix khác, Windows, DOS, OS/2, BeOS và một số phiên bản khác. HTML (bao gồm bảng và khung). CSS và JavaScript rất hạn chế (Thêm chi tiết). Ủng hộ bảng màu với 16, 88 hoặc 256 màu trên trình mô phỏng/bảng điều khiển thiết bị đầu cuối hỗ trợ tính năng này. Hỗ trợ các tab, tải xuống nền với thông báo khi tải xuống hoàn tất. Hỗ trợ chuột. Chỉnh sửa các trường văn bản của biểu mẫu trang web ở bên ngoài soạn thảo văn bản. Các phím tắt URL. Hỗ trợ các tập lệnh trong Perl, Lua, Guile, Ruby.

Imapsync. Chuyển thư

Chuyển thư từ máy chủ IMAP này sang máy chủ IMAP khác bằng imapsync [ 1] / Linux, dòng lệnh: imapsync —host1 imap.this.com —user1 [email được bảo vệ]--passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.another.com --user2 [email được bảo vệ]—passfile2 /home/user/imap/passwordfile2 —ssl2 —skipsize —allowsizemismatch — Có một trang web example.com và một hộp thư [email được bảo vệ] trên máy chủ của một công ty lưu trữ nhất định. Máy chủ IMAP: imap.this.com. Máy chủ IMAP hỗ trợ SSL. — Trang web example.com đang được chuyển sang một hosting khác. Theo đó, hộp thư [email được bảo vệ] với tất cả nội dung của nó và duy trì cấu trúc thư mục. Máy chủ IMAP của nhà cung cấp dịch vụ lưu trữ khác: imap.another.com. Máy chủ IMAP hỗ trợ SSL. 1. Tạo hộp thư [email được bảo vệ] và mật khẩu của nó trên máy chủ của công ty lưu trữ nơi quá trình chuyển tiền đang diễn ra. 2. Tạo hai tập tin văn bản trong thư mục /home/user/imap/: passfile1 với mật khẩu hộp thư ở đầu tiên máy chủ IMAP và passfile2 với mật khẩu cho hộp thư trên máy chủ IMAP thứ hai. 3. chmod 600 /home/user/imap/passwordfile1 4. chmod 600 /home/user/imap/passwordfile2 5. Cài đặt imapsync 6. Chạy imapsync với các thông số và dữ liệu thích hợp Imapsync chuyển thư trong khi vẫn duy trì cấu trúc thư mục từ imap.this .com tại imap.another.com. SSL được sử dụng để mã hóa dữ liệu khi truyền và mật khẩu được lưu trữ trong các tệp được bảo vệ bằng cách đặt quyền thành chmod 600. Chuyển thư giữa hai dịch vụ E-mail có thể yêu cầu sử dụng thông số bổ sung[ 2 ] imapsync. Ví dụ: khi chuyển nội dung của một hộp thư Gmail.com sang một hộp thư khác, bạn phải chỉ định “—port1” và “—port2”: imapsync —host1 imap.gmail.com —port1 993 —user1 [email được bảo vệ]—passfile1 /home/user/imap/passwordfile1 —ssl1 —host2 imap.gmail.com —port2 993 —user2 [email được bảo vệ]—passfile2 /home/user/imap/passwordfile2 —ssl2 —skipsize —allowsizemismatch [ 1 ] Một trường hợp đơn giản và phổ biến: nội dung của một hộp thư email được chuyển sang một hộp thư khác, một hộp thư trống, nằm trên một máy chủ khác. Nhưng có thể có những tình huống phức tạp hơn: Gmail tới ứng dụng Google Di chuyển email và chuyển sang Google Apps bằng imapsync. [ 2 ] Các tùy chọn khác: Di chuyển thư từ máy chủ này sang máy chủ khác bằng imapsync và imapsync(1) - Trang man Linux.

Lý lịch hình ảnh HTML Bài 10. CSS. Căn chỉnh hình ảnh vào giữa

Hình ảnh HTML, chèn hình ảnh vào mã trang

Thẻ HTML chịu trách nhiệm hiển thị hình ảnh

Hình ảnh HTML có thể là bất kỳ hình ảnh nào ở định dạng PNG, JPEG và GIF.
Mã HTML của hình ảnh được xác định bởi thẻ.
Hình ảnh HTML có thể là nền của trang web.
Một hình ảnh HTML có thể được định nghĩa là một siêu liên kết.

Chèn hình ảnh vào mã HTML của trang

Khoảng cách giữa hình ảnh và văn bản theo chiều ngang và chiều dọc

Xác định hình nền trong HTML

Hình ảnh HTML - liên kết và mã xác định nó

Đặt hình ảnh HTML vào giữa trang hoặc khối

Trong thư mục hoặc bất kỳ thư mục nào khác nơi bạn có tệp, hãy đặt một hình ảnh có phần mở rộng, chẳng hạn như gọi nó là bất cứ thứ gì bạn thích, chẳng hạn như .

Chèn hình ảnh vào mã HTML của trang:

Thẻ - chưa ghép nối. Hãy chú ý đến cách nó được đóng lại.

Thuộc tính và giá trị

- bắt buộc, nó cho biết nguồn của hình ảnh.
- xác định văn bản thay thế, một nhận xét có nội dung robot tìm kiếm khi phân tích nội dung của một trang web. Nó cũng cần phải được chỉ định.
- xác định chiều rộng của hình ảnh bằng pixel.
- xác định chiều cao của hình ảnh bằng pixel.

Cho biết kích thước thực tế - bằng cách này bạn sẽ duy trì được chất lượng hình ảnh gốc.

Vì phát triển web Ba định dạng hình ảnh được áp dụng: PNG (.png), JPEG (.jpg) và GIF (.gif). Adobe Photoshop là công cụ chuyên dùng để tạo đồ họa cho website. Nó có thể được sử dụng để chuyển đổi định dạng hình ảnh này sang định dạng hình ảnh khác.

Hình ảnh HTML | Lề ngang và dọc

hoặc khoảng cách ngang và dọc giữa hình ảnh và văn bản

Xem kết quả trong một cửa sổ mới: Hình nền trong HTML

Các thuộc tính được đề cập trong hướng dẫn CSS.

Chèn hình ảnh và thứ tự của nó → → xem tại đây.

Hình ảnh HTML - liên kết

Mã ví dụ:

Xem kết quả trong cửa sổ mới: Hình ảnh HTML được căn giữa trên trang

Bạn cần chú ý điều gì ở đây? → Thứ nhất, thực tế là kích thước được chỉ định - điều này giúp tăng tốc độ tải hình ảnh. Thứ hai, các thuộc tính được chỉ định, điều này cũng rất được mong muốn thực hiện ngay cả khi không có văn bản thay thế. Trong trường hợp đầu tiên, việc căn giữa được xác định bởi một tham số HTML và trong trường hợp thứ hai, bằng cách đưa vào tuyến tính các biểu định kiểu xếp tầng.

Ngày xuất bản: Tháng 10 năm 2009 | Cập nhật: tháng 8 năm 2014

Bài 9. Nền tảng HTML Hình ảnh HTML Bài 11. Hình ảnh và văn bản HTML

Làm cách nào để căn chỉnh tâm của hình ảnh với tâm của div?

Đã tồn tại từ lâu phương pháp khác nhau căn giữa hình ảnh bằng CSS. Việc triển khai các phương pháp này bị ảnh hưởng rất nhiều bởi Internet Explorer 5. Nhưng ngày nay ít người quan tâm đến phiên bản trình duyệt này nên bạn có thể loại bỏ những mã không cần thiết.

Trước đây, IE5 và IE5.5 đã đưa ra các quy tắc riêng - để căn giữa một thành phần trang, bạn phải sử dụng thuộc tính CSS. Và để căn giữa, ví dụ như một bức tranh, bạn cần đặt nó vào bên trong khối bổ sung:

Khối bổ sung này được gán các thuộc tính CSS tương ứng:

Tất cả điều này là cần thiết vì phiên bản thứ năm của Internet Explorer không hỗ trợ thuộc tính đã tồn tại và được các trình duyệt khác hỗ trợ lề, tự động gán cùng một khoảng cách cho bên trái và bên phải của phần tử được căn chỉnh. Phương pháp trên vẫn được sử dụng.

Nhưng IE5 và IE5.5 đã là chuyện quá khứ nên mã HTML có thể được làm đơn giản và trang nhã hơn:

Việc loại bỏ các khối bổ sung không cần thiết đạt được nhờ CSS thích hợp:

Thuộc tính gán một đặc điểm cho hình ảnh phần tử khối, giúp loại bỏ nhu cầu sử dụng hoặc xung quanh hình ảnh. Tuyên bố sau đó gán phần đệm trên và dưới giá trị null và phần đệm bên trái và bên phải sẽ tự động có cùng giá trị, giúp căn chỉnh hình ảnh vào giữa.

Cần phân công vết lõm khác nhau lên và xuống? Không có gì. Đừng quên viết tắt:

Thật không may, không giống như các trường hợp căn chỉnh hình ảnh theo cạnh trái và phải (và), không có khả năng phương pháp tiêu chuẩn bọc văn bản xung quanh một hình ảnh ở giữa. Tất nhiên, nếu nó rất quan trọng thì nó có thể thực hiện được.

Ngoài ra, nếu hình ảnh cũng là một liên kết thì vùng liên kết sẽ mở rộng ra toàn bộ chiều rộng của khối, bất kể chiều rộng của hình ảnh. Trong một số trường hợp đây là một bất lợi.

Phương pháp căn chỉnh được mô tả ở trên phù hợp nhất với các trang web sử dụng hình ảnh bên trong văn bản (tin tức, bài viết). Tất nhiên, đối với các thư viện ảnh, có những cách sắp xếp ảnh phức tạp hơn của riêng họ.

trình duyệt web IE	Trình duyệt Chrome	Opera	Cuộc đi săn	Firefox	Android	iOS
6.0+	1.0+	9.0+	1.0+	1.0+	1.0+	1.0+

Nhiệm vụ

Căn chỉnh ảnh và chú thích theo chiều ngang trên trang web.

Giải pháp

Hình ảnh minh họa kèm theo văn bản thường được căn giữa trang web, văn bản xuất hiện trước và sau hình ảnh. Sự sắp xếp các phần tử này cho phép bạn chia văn bản lớn thành các khối có ý nghĩa và thu hút sự chú ý vào hình ảnh.

Ví dụ 1: Sử dụng căn chỉnh văn bản

HTML5CSS 2.1IECrOpSaFx

Kết quả của ví dụ này được hiển thị trong Hình. 1.

Cơm. 1. Hình ảnh được căn giữa trên trang web

Ví dụ 2. Chú thích ảnh

HTML5CSS 2.1IECrOpSaFx

Kết quả của ví dụ này được hiển thị trong Hình. 2.

Làm cách nào để căn giữa ảnh trên trang web?

2. Chữ ký dưới ảnh

CSS tập trung vào hình ảnh

các cửa sổ: Internet Explorer 6.0+, Firefox 1.0+, Google Chrome, Opera 5.0+ [1], Safari 3.1+, SeaMonkey 1.0+ [2].

Linux: Firefox 1.0+, Google Chrome / Chrome, Opera 5.0+, SeaMonkey 1.0+ [3], NetSurf 2.6+, Hv3.

Căn chỉnh trung tâm theo chiều ngang của hình ảnh bằng CSS. Ví dụ:

HTML/XHTML. Mã số:

.example (vị trí: tương đối; trái: 0px; trên cùng: 0px; chiều cao: tự động; chiều rộng: 100%; float: trái; phần đệm: 10px; đường viền: 1px #ccc rắn; nền: #fafafa;)

.example img (hiển thị: khối; lề: 0 tự động;)

Các thuộc tính CSS của vùng chứa (trong trường hợp này là example ) có thể rất khác nhau, việc căn giữa hình ảnh được tạo bằng cách sử dụng các kiểu liên quan trực tiếp đến hình ảnh: .example img (display: block; Margin: 0 auto;).

Subditos và chủ đề khác biệt

CSS tập trung vào hình ảnh

Căn chỉnh trung tâm theo chiều ngang của hình ảnh bằng CSS. Ví dụ: HTML/XHTML.

Căn chỉnh hình ảnh với HTML và CSS trung tâm

Mã số: CSS. Mã: .example (vị trí: tương đối; trái: 0px; trên cùng: 0px; chiều cao: tự động; chiều rộng: 100%; float: trái; phần đệm: 10px; đường viền: 1px #ccc rắn; nền: #fafafa;) .example img (hiển thị: khối; lề: 0 tự động;) Thuộc tính CSS của vùng chứa (trong trường hợp này là ví dụ) có thể rất khác nhau; căn giữa của hình ảnh được tạo bằng cách sử dụng các kiểu liên quan trực tiếp đến hình ảnh: .example img (display: block ; lề: 0 tự động;).

[ 1 ] Và cả trong Opera 4.0+, nếu không sử dụng short Mục nhập CSS của cải. Nghĩa là, nếu mã CSS ở dạng .example img (display: block; lề trái: auto; lề phải: auto;). [ 2 ] Và cả trong Netscape 6.01+, Mozilla 0.6+. [ 3 ] Và cả trong Netscape 6.01+, Mozilla 0.6+.

Liên kết điện tử. Cách sử dụng

Tới các trang: ELinks - Text, hoặc web giao diện điều khiển browser. Mô tả: tính năng, ảnh chụp màn hình, nơi tải xuống. Liên kết điện tử. Thiết lập - Cách thiết lập ELinks. Chạy ELinks cho phép bạn thực hiện hầu hết mọi thứ có thể thông qua việc sử dụng các menu của nó. Vì vậy, những gì tiếp theo chỉ là về cách chạy ELinks và, ví dụ, cách thực hiện một số việc khác. 1) Cách chạy ELinks - ELink có thể chạy trong môi trường GUI (X Windows, MS Windows, v.v.) hoặc GUI dòng lệnh. Trong trường hợp đầu tiên, trình mô phỏng / bảng điều khiển thiết bị đầu cuối trước tiên phải được khởi chạy: bảng điều khiển xterm, rxvt, Win32 và các bảng điều khiển khác: ELinks (Linux) - Để khởi chạy ELinks, hãy nhập lệnh: elinks - Để khởi chạy ELinks, mở tài liệu web từ Internet: elinks Địa chỉ tài liệu web - Để khởi chạy truy cập ELinks ổ cứngđể xem các thư mục cục bộ: elinks file:/// hoặc: elinks / - Để khởi chạy ELinks, hãy mở thư mục cục bộ: elinks file:///home/user1/ hoặc: elinks /home/user1/ - Để khởi chạy ELinks, mở tập tin cục bộ: elinks file:///home/user1/document1.htm hoặc: elinks /home/user1/document1.htm ELinks (Windows) - Để khởi chạy ELinks, hãy nhập lệnh: elinks - Để khởi chạy ELinks, mở tài liệu web từ Internet: elinks Địa chỉ web của tài liệu web - Để khởi chạy ELinks truy cập vào ổ cứng để xem các thư mục cục bộ: elinks file:/// - Để khởi chạy ELinks mở thư mục cục bộ: elinks file://c/home/user1 / - To khởi chạy ELinks, mở tệp cục bộ: elinks file://c/home/user1/document1.htm 2) Để truy cập menu ELinks: Nhấn Esc trên bàn phím 3) Để mở tài liệu web trong ELinks đang chạy: Nhấn g trên bàn phím hoặc Esc -> File -> Go to URL -> [Nhập địa chỉ web] -> Enter 4) Quay lại: Phím mũi tên trái trên bàn phím của bạn hoặc Esc -> Tệp -> Quay lại 5) Mở liên kết trong mới tab nền: Shift - t hoặc Esc -> Liên kết -> Mở trong tab mới ở chế độ nền 6) Đi tới tab tiếp theo: Shift -> hoặc Esc -> Xem -> tab tiếp theo 7) Đóng tab: Nhấn c trên bàn phím hoặc Esc -> Xem -> Đóng tab 8) Truyền URI ứng dụng bên ngoài khi ELinks đang chạy trong trình mô phỏng thiết bị đầu cuối.

Ngày: 2010-09-07

Trong tài liệu HTML, hình ảnh được căn chỉnh theo chiều ngang, chiều dọc và căn giữa.

Căn chỉnh hình ảnh theo chiều ngang

Để điều khiển hình ảnh theo chiều ngang, hãy sử dụng thuộc tính Align="".

Căn chỉnh hình ảnh vào giữa trong HTML

Chỉ định left trong giá trị của nó nếu bạn muốn căn chỉnh hình ảnh về cạnh trái của trang hoặc right nếu bạn muốn căn chỉnh nó về cạnh phải. Theo mặc định, hình ảnh luôn được căn lề về phía bên trái của trang:

Căn chỉnh hình ảnh dọc

Sử dụng cùng thuộc tínhalign="" , bạn có thể kiểm soát vị trí dọc của hình ảnh. Để làm điều này, bạn cần chỉ định top trong giá trị của nó để căn chỉnh dọc theo đường viền trên, giữa - ở giữa và dưới cùng - dọc theo đường viền dưới:

Lưu ý: mục nhập image/photo.jpg có nghĩa là hình ảnh không nằm trong một thư mục mà nằm trong thư mục hình ảnh.

Căn chỉnh hình ảnh vào giữa trang

Ngoài ra, hình ảnh có thể được căn giữa. Để thực hiện việc này, hãy bọc thẻ hình ảnh trong thẻ được ghép nối:

1.1 Giới thiệu về html

1.2 Cấu trúc tài liệu HTML

2.1 Đoạn văn trong html

2.2 Tiêu đề trong html

2.3 Trích dẫn và bình luận trong html

2.4 Khoảng trắng và thẻ ngắt dòng trong HTML

3.1 Danh sách đánh số html

3.2 Danh sách có dấu đầu dòng

3.3 Danh sách lồng nhau

4.1 Làm nổi bật HTML chữ

4.2 Kiểu chữ và cỡ chữ

4.3 Thay đổi màu văn bản trong html

4.4 Đường viền và nền trang

5.1 Chèn hình ảnh vào trang web

Trên trang này, bạn sẽ tìm thấy câu trả lời cho câu hỏi làm thế nào để căn giữa hình ảnh trong một khối. Giải pháp được trình bày sẽ được phân tích và tất cả các tác động tích cực và tiêu cực sẽ được xem xét.

Vì vậy, hôm nay chúng ta sẽ nói về cách bạn có thể định hướng hình ảnh vào giữa khối, không chỉ so với trục ngang mà còn so với trục dọc.

Các nhiệm vụ tương tự luôn phát sinh, chẳng hạn như danh mục sản phẩm trong cửa hàng trực tuyến. Một bức ảnh của sản phẩm được đăng, bên dưới là một số thông tin về sản phẩm và để làm cho tất cả sản phẩm trông đẹp mắt và đẹp mắt, các bức ảnh được căn giữa so với giấy gói của chúng. Dưới đây là một ví dụ từ thực tế thực tế

Thông thường, việc cài đặt hình ảnh trên một trang được thực hiện bởi người dùng trang web bằng cách sử dụng bảng điều hành người dùng. Tùy chọn này rất có thể xảy ra, đặc biệt trong trường hợp Chúng ta đang nói về về các cửa hàng trực tuyến. Bảng quản trị cho phép bạn tải ảnh ở mọi kích thước và hầu hết mọi định dạng lên trang web. Hơn nữa, ban đầu chúng được quy định kích thước tối đa khối và hình ảnh. Như vậy, sau khi lấp đầy hình ảnh sẽ được thu nhỏ lại cho phù hợp đúng kích cỡ hoặc cắt bỏ những phần không cần thiết. Khi xem xét phương án cuối cùng, sẽ tối ưu nhất nếu hình ảnh được căn giữa theo chiều dọc và chiều ngang.

Giải pháp cổ điển

Bản chất của giải pháp được chấp nhận chung là tác dụng của các thuộc tính căn chỉnh văn bản và căn chỉnh dọc. Thoạt nhìn, mọi thứ có vẻ khá đơn giản và hợp lý, nhưng điều này không hoàn toàn đúng.

Vấn đề quan trọng và phức tạp phương pháp này Vấn đề là Internet Explorer yêu thích của mọi người không thể hoạt động chính xác với giá trị ô trong bảng. Vì vậy cần phải viết thêm biểu thức để thực hiện phương thức.

Và tất nhiên, điều quan trọng nhất đáng lẽ phải được nói đầu tiên. Tất cả các thuộc tính được chỉ định phải được chỉ định cho phần tử gốc mà hình ảnh của chúng ta sẽ được đặt. Trong quá trình suy luận, chúng tôi đã đi đến đoạn mã sau

HTML

< div class = "block" > < div class = "img" > < img width= "200" src= "img4.jpg" > < div class = "text" >Khối văn bản

Khối ( chiều rộng: 250px; chiều cao: 220px; lề: 50px 100px; văn bản- căn chỉnh: giữa; nền: #eee; hiển thị: bảng- ô; dọc- căn chỉnh: giữa; html . block img ( /* hack for e6 */ display: block; z- chỉ mục: biểu thức( /* biểu thức được tối ưu hóa sẽ chỉ hoạt động khi trang tải */ runtimeStyle. zIndex = 1 , this == ((200 / 2 ) - ParseInt(offsetHeight) / 2 )< 0 ? style. marginTop= "0" : style. marginTop= (200 / 2 ) - (parseInt(offsetHeight) / 2 ) + "px" ) ; } : first- child+ html . block img { /* хак для ие7 */ display: block; z- index: expression( runtimeStyle. zIndex = 1 , this == ((200 / 2 ) - parseInt(offsetHeight) / 2 ) < 0 ? style. marginTop= "0" : style. marginTop= (200 / 2 ) - (parseInt(offsetHeight) / 2 ) + "px" ) ; } . text { color: c7c7c7; margin- left: 70px; }

Xem ảnh chụp màn hình bên dưới để biết kết quả công việc đã thực hiện.

Giải pháp thay thế

Có một cách khác để thực hiện nhiệm vụ, nhưng phương pháp này không đáp ứng được yêu cầu về ngữ nghĩa. Bạn có thể hiển thị hình ảnh bằng thuộc tính nền CSS, trong đó bạn chỉ định vị trí của hình ảnh là "trung tâm". Điều này mâu thuẫn với các quy tắc ngữ nghĩa, theo đó một hình ảnh có ý nghĩa logic sẽ được hiển thị thông qua thẻ img.

Dưới đây là mã cho giải pháp thay thế của chúng tôi

Chặn ( chiều rộng: 250px; chiều cao: 220px; lề: tự động 50px; nền: url(img4. jpg) #eee trung tâm trung tâm không lặp lại; kích thước nền: 200px; hiển thị: khối; )

Do sử dụng phương pháp thứ nhất hoặc thứ hai, chúng ta sẽ nhận được kết quả tương tự trên trình duyệt

Khi sử dụng phương pháp thứ hai, các lập trình viên có kinh nghiệm sẽ lấy mã ra khỏi Hình nền thành một tài liệu HTML. Điều này cho phép bạn điều hướng tài liệu và nhanh chóng tìm thấy một khối có hình ảnh. Và nó trông như thế này:

HTML

< div style= " background:url(img4.jpg) #eee no-repeat center center" >

Ưu và nhược điểm của phương pháp

So với phiên bản cổ điển, Lựa chọn thay thế có những ưu điểm sau:

mọi hạn chế sẽ bị xóa khỏi phần gốc (có nghĩa là một hiệu ứng định vị hoặc bao bọc nhất định), cần thiết cho hoạt động tối ưu của phương pháp;
việc sử dụng biểu thức bị loại trừ;
không cần đặt thuộc tính tràn cho khối cha với giá trị phù hợp để cắt ảnh lớn;
giảm thiểu số dòng mã.

Tuy nhiên, đồng thời, phương pháp này có một số nhược điểm:

không tuân thủ các quy tắc ngữ nghĩa;
vấn đề chưa được giải quyết trong việc xác định kích thước hình ảnh.

Tóm tắt