Tìm hiểu cách căn giữa hình ảnh và các phần tử nội tuyến khác bằng HTML và CSS để bạn có thể tùy chỉnh giao diện trang web của mình.

Bạn đang xem : hình ảnh ở giữa với html

Căn giữa hình ảnh bằng HTML và CSS có thể giúp bạn tạo cảm giác cân xứng trên trang web của bạn và hướng sự chú ý đến các yếu tố quan trọng nhất trên trang một cách hiệu quả.

Vấn đề: Nếu bạn không có bất kỳ kinh nghiệm viết mã nào, việc căn chỉnh bất kỳ phần tử nào với mã HTML có thể là một nhiệm vụ khó khăn. Trong bài viết này, chúng tôi sẽ trình bày mọi thứ bạn cần biết về căn giữa hình ảnh (hoặc bất kỳ yếu tố nội dòng nào) và hướng dẫn bạn qua một số hướng dẫn thân thiện với người mới bắt đầu. Cuối cùng, bạn sẽ có thể căn giữa hình ảnh khi nhắm mắt.

Bạn sẽ học:

Cân nhắc khi Căn giữa Hình ảnh

Trước tiên, tại sao bạn nên căn giữa hình ảnh – hoặc bất kỳ yếu tố nào khác – ở vị trí đầu tiên? Con người khao khát sự đối xứng trên và ngoại tuyến. Sở thích này mạnh đến nỗi nó thực sự được nuôi dưỡng trong hệ thống thần kinh của chúng ta và đã tồn tại hàng nghìn năm.

Đối xứng không có nghĩa là mọi thứ phải giống hệt nhau ở hai bên của trục. Có một số cách để tạo ra sự đối xứng trong một trang web và một trong những cách chúng ta sẽ thảo luận trong bài viết này là sự cân bằng.

Đạt được sự cân bằng trong trang web của bạn chủ yếu dựa vào sự liên kết của các phần tử trên một trang. Các yếu tố căn giữa, đặc biệt là các yếu tố lớn như hình ảnh, có thể giúp thiết kế của bạn trông có thứ tự và bắt mắt.

Tài nguyên Nổi bật

Hướng dẫn dành cho Người mới bắt đầu về HTML

Điền vào biểu mẫu để có phần giới thiệu miễn phí về hướng dẫn HTML.

Quy trình căn giữa không khó, nhưng nó khác nhau tùy thuộc vào việc các phần tử là nội tuyến hay khối . Có một vài điểm khác biệt giữa các loại phần tử này, nhưng sự khác biệt chính là cách chúng ảnh hưởng đến luồng của một trang.

Căn giữa Nội tuyến so với Phần tử Khối

Các phần tử khối hoạt động bằng cách phá vỡ luồng của một trang, trong khi các phần tử nội tuyến hoạt động theo luồng.

Các phần tử khối bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng của khung nhìn (hoặc chiều rộng của trang). Mặt khác, các phần tử nội tuyến chiếm không gian được phân bổ bởi các thẻ HTML của chúng, cho phép chúng đi theo “dòng chảy” của trang chứ không phải làm gián đoạn nó. Tất nhiên, chiều rộng và kiểu dáng của các phần tử này khác nhau tùy thuộc vào mã CSS cho thẻ HTML đó.

Dưới đây là một ví dụ để giúp hình dung những khác biệt này.

Bên dưới, bạn sẽ thấy một nút Bootstrap được tạo kiểu như một phần tử nội tuyến và một phần tử khối.

Nút nội dòng sẽ cần mã đặc biệt để được căn chỉnh cho chính giữa, trong khi nút khối chỉ cần một số điều chỉnh về chiều rộng hoặc phần đệm.

Tldr; Các phần tử khối và phần tử nội tuyến yêu cầu các phương pháp khác nhau để căn chỉnh chúng vào tâm. Ví dụ: khi bạn căn giữa một div (là một phần tử khối), bạn có thể sử dụng margin và padding hoặc các phương pháp khác.

Tuy nhiên, bạn không thể sử dụng các phương pháp này khi căn giữa hình ảnh.

Đó là bởi vì hình ảnh là phần tử nội dòng và đi cùng dòng chảy của trang. Giống như nút nội dòng ở trên, bạn sẽ cần mã đặc biệt để đặt nó ở giữa trang.

Dưới đây, chúng tôi sẽ hướng dẫn chi tiết quy trình căn giữa một hình ảnh hoặc bất kỳ phần tử nội dòng nào trong HTML và CSS. Quá trình này sẽ hoạt động cho dù bạn đang xây dựng trang web của mình từ đầu hay sử dụng một khuôn khổ như Bootstrap CSS . Nhưng trước tiên, hãy trình bày một số khái niệm cơ bản về HTML và CSS.

Bạn muốn tìm hiểu thêm về HTML? Tải xuống hướng dẫn miễn phí của chúng tôi để biết các phương pháp hay nhất để bắt đầu với HTML.

Xem Thêm  Function trong SQL Server: Hướng dẫn từ A-Z về function - clustered index là gì

Hiểu HTML và CSS khi căn giữa một hình ảnh

Trước khi chúng ta thảo luận về các cách khác nhau để căn giữa một hình ảnh, điều quan trọng là phải làm rõ “trong HTML” thực sự có nghĩa là gì. Nói cách khác, bạn sẽ thêm mã “căn giữa” cho hình ảnh của mình ở đâu? Ngay trong & lt; img & gt; nhãn? Hay bạn phải truy cập thẳng vào mã CSS của trang web của mình? Hãy cùng xem.

Căn giữa Hình ảnh với & lt; center & gt; Gắn thẻ

Ngày xưa, có một HTML & lt; center & gt; yếu tố. Đây là một phần tử cấp khối sẽ tự động căn giữa bất kỳ khối hoặc phần tử nội dòng nào mà nó chứa. Vì vậy, căn giữa một hình ảnh sẽ yêu cầu một dòng HTML duy nhất trông giống như sau:

  

& lt; center & gt; & lt; img src = "image1.jpg" alt = "center center" height = "598" width = "398" & gt; & lt; / center & gt;

Tuy nhiên, phần tử này không được dùng nữa trong HTML4. Giờ đây, HTML5 là tiêu chuẩn, thẻ lỗi thời này có thể sẽ không hiển thị trong bất kỳ trình duyệt hiện đại nào.

Vậy quy trình căn giữa một hình ảnh trong HTML là gì? Điều quan trọng nhất cần hiểu là căn giữa hình ảnh ngày nay sẽ yêu cầu bạn thêm CSS vào HTML . Bạn không thể sử dụng riêng HTML nữa.

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

Để căn giữa một hình ảnh, bạn sẽ cần sử dụng CSS. Bạn có một số tùy chọn: CSS nội bộ, CSS bên ngoài hoặc CSS nội tuyến.

CSS nội bộ được đặt trong & lt; head & gt; của trang web, trong khi CSS bên ngoài nằm trong biểu định kiểu bên ngoài, sau đó được liên kết trong phần & lt; head & gt; tiết diện. Mặt khác, CSS nội tuyến được nhúng vào mã HTML trong & lt; body & gt; tiết diện. CSS được xác định trong thuộc tính “style” của phần tử đang được nhắm mục tiêu.

Nói chung, bạn nên giữ HTML riêng biệt với CSS của mình, nhưng bất kỳ phương pháp nào trong số này đều sẽ trả về cùng một kết quả. Nếu bạn không thể tách chúng vì một lý do nào đó – chẳng hạn như nền tảng xây dựng trang web bạn đang sử dụng giữ chúng lại với nhau trong trình chỉnh sửa mã nguồn – thì bạn sẽ phải sử dụng CSS nội tuyến.

Tin tốt là cú pháp của CSS nội tuyến tương tự như cú pháp của CSS bên trong và bên ngoài. Thuộc tính được đặt tên và cung cấp giá trị thuộc tính, nhưng bộ quy tắc được bao bằng dấu nháy đơn thay vì dấu ngoặc.

Dưới đây là một ví dụ về CSS nội tuyến đang hoạt động. Giả sử bạn muốn thay đổi màu văn bản của tiêu đề đầu tiên trên trang của mình và giữ nguyên các tiêu đề khác. Bạn sẽ đặt thuộc tính màu thành mã màu mà bạn thích, đặt nó trong thuộc tính style và đặt toàn bộ bên trong thẻ H2. < / p>

Hãy khám phá bên dưới:

Xem Pen Ví dụ CSS nội tuyến của HubSpot ( @ hubspot < / span>) trên CodePen .

Điều này so sánh với CSS nội bộ như thế nào? Giả sử bạn muốn sử dụng cùng một CSS đó nhưng đặt nó ở phần đầu giữa & lt; style & gt; thẻ.

Bạn sẽ thay thế thuộc tính “style =” trong HTML của mình bằng CSS selector . Bộ chọn CSS là tên mà bạn sử dụng để xác định một phần tử HTML. Sau đó, bạn sử dụng tên này trong tệp CSS để thiết kế giao diện của phần tử đó.

Lưu ý: Trong ví dụ bên dưới, công cụ chọn ID được sử dụng, nhưng bạn cũng có thể sử dụng Lớp CSS .

Xem Pen Ví dụ CSS nội bộ của HubSpot ( @ hubspot < / span>) trên CodePen .

Đây cũng là cách CSS sẽ trông như thế nào trong biểu định kiểu bên ngoài. Bạn sẽ liên kết đến biểu định kiểu bên ngoài giữa & lt; head & gt; của trang của bạn. Hãy xem ví dụ về biểu định kiểu bên ngoài bên dưới, với kết quả tương tự:

Xem Pen Ví dụ CSS về biểu định kiểu bên ngoài của HubSpot ( @ hubspot ) trên CodePen .

Giờ chúng tôi đã hiểu các cách khác nhau mà bạn có thể viết CSS, hãy xem cách bạn có thể căn giữa một hình ảnh bằng cả HTML và CSS.

Xem Thêm  Chuỗi phân tách trong Python (): Danh sách, Theo ký tự, Dấu phân cách VÍ DỤ - python chia danh sách bằng dấu phân cách

Cách căn giữa một hình ảnh trong CSS

Có một số cách bạn có thể căn giữa một hình ảnh, tùy thuộc vào việc bạn muốn căn giữa nó theo chiều ngang hay chiều dọc. Chúng ta sẽ bắt đầu bằng cách xem xét cách căn giữa một hình ảnh theo chiều ngang.

Cách căn giữa hình ảnh theo chiều ngang

Có ba cách để căn giữa một hình ảnh theo chiều ngang. Cái đầu tiên hoạt động tốt hơn cho những hình ảnh nhỏ hơn và cái thứ hai cho những hình ảnh lớn hơn. Cách thứ ba hoạt động tốt nhất nếu bạn đang sử dụng mô hình bố cục đáp ứng Flexbox .

Chúng tôi sẽ bao gồm cả ba để bạn có thể căn giữa bất kỳ hình ảnh nào, bất kể kích thước, trên trang web của bạn.

Phương pháp 1: Sử dụng thuộc tính Text-Align

Để căn giữa hình ảnh theo chiều ngang, bạn có thể sử dụng thuộc tính căn chỉnh văn bản CSS.

Bước 1: Vì thuộc tính này chỉ hoạt động trên các phần tử cấp khối chứ không phải các phần tử nội tuyến, hãy bắt đầu bằng cách bao bọc hình ảnh trong một phần tử khối.

Bước 2: Gói hình ảnh trong một div và sau đó áp dụng thuộc tính style với thuộc tính text-align được đặt ở giữa. Việc này đơn giản nhưng chỉ hoạt động nếu hình ảnh nhỏ hơn khung nhìn của bạn.

Đây là HTML với CSS nội tuyến và kết quả:

Đây là HTML với CSS nội tuyến và kết quả:

Xem Bút Cách Căn giữa Hình ảnh với Căn chỉnh Văn bản Thuộc tính bởi HubSpot ( @ hubspot ) trên CodePen .

Phương pháp 2: Sử dụng Thuộc tính ký quỹ

Giả sử bạn có một hình ảnh rất lớn mà bạn muốn căn giữa. Trong trường hợp đó, gói hình ảnh trong một phần tử khối sẽ không phải là lựa chọn tốt nhất. Thay vào đó, bạn muốn xác định hình ảnh bằng thuộc tính hiển thị CSS và đặt nó thành “block”. Dưới đây là cách căn giữa một hình ảnh bằng cách sử dụng thuộc tính margin.

Bước 1: Trước khi đặt lề, hãy đặt chiều rộng của hình ảnh ở mức cố định để hình ảnh không kéo dài khung nhìn. Trong trường hợp này, tôi sẽ sử dụng giá trị phần trăm là 60%.

Bước 2: Đặt thuộc tính lề CSS bằng cách xác định hình ảnh bằng thuộc tính hiển thị CSS và đặt nó thành “khối”. Điều này sẽ yêu cầu trình duyệt coi hình ảnh như thể nó là một phần tử khối, không phải một phần tử nội dòng, do đó cho phép bạn sử dụng thuộc tính lề CSS.

Bước 3: Đặt lề trái và lề phải thành “tự động” để chúng bằng nhau.

Đây là CSS với kết quả:

Xem Bút pháp Cách căn giữa một hình ảnh với Thuộc tính Lề của HubSpot ( @ hubspot ) trên CodePen .

Phương pháp 3: Sử dụng Thuộc tính linh hoạt

Bạn cũng có thể căn giữa hình ảnh theo chiều ngang bằng cách sử dụng thuộc tính flex, không yêu cầu tính toán lề.

Bước 1: Bao bọc hình ảnh trong phần tử div.

Bước 2: Đặt thuộc tính hiển thị thành “flex”, cho trình duyệt biết rằng div là vùng chứa chính và hình ảnh là một item flex.

Bước 3: Đặt thuộc tính justify-content thành “center”.

Bước 4: Đặt chiều rộng của hình ảnh thành giá trị chiều dài cố định.

Đây là CSS với kết quả:

Xem Bút pháp Cách căn giữa một hình ảnh với Thuộc tính linh hoạt của HubSpot ( @ hubspot ) trên CodePen .

Nhấp vào nút HTML để xem cả mã HTML.

Mẹo hay: Cung cấp bộ chọn ID cho div của bạn và sử dụng bộ chọn trong mã CSS của bạn. Bằng cách đó, tất cả div trên trang web của bạn không bị ảnh hưởng.

Cách căn giữa hình ảnh theo chiều dọc

Căn giữa bất kỳ phần tử nào theo chiều dọc khó hơn chiều ngang, nhưng vẫn có thể làm được. Đối với các bản demo bên dưới, tôi sẽ sử dụng CSS nội bộ.

Phương pháp 1: Sử dụng Thuộc tính Vị trí

Để căn giữa một hình ảnh theo chiều dọc, bạn có thể bọc nó trong một phần tử khối như div và sử dụng kết hợp thuộc tính vị trí CSS , bên trái và thuộc tính hàng đầu và thuộc tính biến đổi.

Xem Thêm  Thuộc tính kích thước nền CSS - hình nền css điều chỉnh theo kích thước màn hình

Bước 1: Bắt đầu bằng cách đặt vị trí của div chứa hình ảnh thành tuyệt đối để nó được đưa ra khỏi dòng tài liệu thông thường.

Bước 2: Đặt thuộc tính bên trái và trên cùng thành 50%. Điều này yêu cầu trình duyệt sắp xếp cạnh trái và trên cùng của div chứa hình ảnh với tâm của trang theo chiều ngang và chiều dọc (tức là 50% sang phải và xuống trang).

Đây là vấn đề: đặt các cạnh của div ở giữa trang sẽ làm cho div trông lệch tâm.

Đó là nơi xuất hiện của thuộc tính chuyển đổi CSS .

Bước 3: Để thực sự căn giữa div chứa hình ảnh, bạn có thể sử dụng phương thức translate () để di chuyển div dọc theo trục X và Y. Cụ thể, bạn muốn di chuyển div 50% sang trái và lên trên từ vị trí hiện tại của nó sao cho tâm của hình ảnh thẳng hàng với tâm của trang. Để di chuyển sang trái và lên trên, bạn cần sử dụng các giá trị âm.

Đây là CSS:

Xem Bút pháp Cách căn giữa hình ảnh theo chiều dọc với thuộc tính vị trí của HubSpot ( @ hubspot ) trên CodePen .

Phương pháp 2: Sử dụng Thuộc tính linh hoạt

Bước 1: Để căn giữa một hình ảnh theo chiều ngang và chiều dọc bằng Flexbox, hãy bắt đầu bằng cách gói nó trong một phần tử khối như một div.

Bước 2: Xác định div này làm vùng chứa linh hoạt bằng cách đặt thuộc tính hiển thị thành “linh hoạt”.

Bước 3: Xác định thuộc tính align-item và justify-content thành “căn giữa”. Thao tác này sẽ yêu cầu trình duyệt căn giữa mục flex (hình ảnh bên trong div) theo chiều dọc và chiều ngang.

Bước 4: Đặt chiều cao của vùng chứa div thành chiều cao tương ứng.

Đây là CSS với kết quả:

Xem Bút pháp Cách căn giữa hình ảnh theo chiều dọc với thuộc tính vị trí của HubSpot ( @ hubspot ) trên CodePen .

Tạo bố cục của bạn

Với một chút kiến ​​thức về mã hóa, bạn có thể mang lại cảm giác đối xứng và cân bằng cho trang web của mình với các hình ảnh, văn bản và nút được căn giữa. Biết cách căn chỉnh các yếu tố này sẽ giúp bạn kiểm soát và tùy chỉnh bố cục của mình để có giao diện chuyên nghiệp mà khách truy cập trang web của bạn sẽ thích.

Ghi chú của người biên tập: Bài đăng này ban đầu được xuất bản vào tháng 11 năm 2020 và đã được cập nhật để có tính toàn diện.

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề hình ảnh trung tâm với html

Hiển thị hình ảnh được lựa chọn trong Input:File trên trang web

alt

  • Tác giả: Anh Nguyen Ngoc
  • Ngày đăng: 2021-06-09
  • Đánh giá: 4 ⭐ ( 8870 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế Web với HTML5 và CSS3 playlist: https://www.youtube.com/playlist?list=PLn9lhDYvf_3EpzQgLVj9DgQ8H50jo9HVi
    Fan Page: https://www.facebook.com/proit4all
    Nhóm thảo luận: https://www.facebook.com/groups/115838366528104
    Images Resource: https://drive.google.com/file/d/1QcQFHA_zlFgdxy4ScK72vigvjxzLK3ps/view?usp=sharing

    HTML5 CSS3 Javascript jQuery

Học HTML bài: 23. Bản đồ Hình ảnh Liên kết

  • Tác giả: suachuamaytinh.vn
  • Đánh giá: 3 ⭐ ( 9337 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy làm cho các phần khác nhau trong một hình ảnh inline hoạt động như một liên kết dựa trên bản đồ hình ảnh của client …Mục đíchSau bài học này bạn có…

Hình ảnh trung tâm, Hinh anh trung tam

  • Tác giả: cete.vnuhcm.edu.vn
  • Đánh giá: 4 ⭐ ( 7034 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trung Tâm Khảo Thí và Đánh Giá Chất Lượng Đào Tạo, Đại học Quốc gia TP.HCM.

One moment, please…

  • Tác giả: daotaolaptrinh.edu.vn
  • Đánh giá: 3 ⭐ ( 2060 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Nhúng hình ảnh trong phần tử

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 9207 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn có thể sử dụng hình ảnh loại đầu vào. Nó hoạt…

Cập nhật hình ảnh công trình nâng nền Trung Tâm Chắp Cánh

  • Tác giả: maison-chance.org
  • Đánh giá: 5 ⭐ ( 2406 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Từ cuối tháng 4 vừa qua, được sự trợ giúp của mạnh thường quân, Maison Chance đã bắt đầu triển khai dự án nâng nền và cải tạo hệ thống…

Các thẻ HTML định dạng hình ảnh và video – Trung tâm Công nghệ thông tin

  • Tác giả: ict.ulis.vnu.edu.vn
  • Đánh giá: 4 ⭐ ( 5422 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php