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 : mã html để căn giữa một hình ảnh

Căn giữa một 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.

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.

Xem Thêm  Cách sử dụng vòng lặp For để lặp lại qua danh sách - python for vòng lặp qua danh sách

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.

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 .

Xem Thêm  Làm thế nào để chuyển đổi ký tự đầu tiên sang chữ hoa bằng PHP? - sang chữ hoa php

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.

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.

Xem Thêm  PHP bao gồm và yêu cầu - yêu cầu gì trong php

Đâ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ủ đề mã html để căn giữa một hình ảnh

Hướng dẫn căn giữa hình ảnh website bằng html, css đơn giản, dễ hiểu| Unitop.vn

alt

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2019-04-21
  • Đánh giá: 4 ⭐ ( 6001 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong video này tôi hướng dẫn bạn cách chỉnh hình ảnh căn giữa nội dung website bằng html, css một cách dễ dàng chỉ sau một vài bước.

    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ————
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youttube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen
    ————————–
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn
    unitop hocwebdilam
    © Copyright Phan Văn Cương. Do not Reup

    Chào bạn, chúc bạn học tốt!

Cách căn giữa hình ảnh và đối tượng HTML trên trang web bằng CSS

  • Tác giả: www.greelane.com
  • Đánh giá: 4 ⭐ ( 8932 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS là cách tốt nhất để căn giữa hình ảnh và bất kỳ thứ gì khác trên trang web của bạn. Tìm hiểu cách căn giữa văn bản, hình ảnh và các phần tử HTML khác đúng cách.

Cách Căn Ảnh Ra Giữa Trong Css Để Căn Giữa Một Hình Ảnh Theo Chiều Ngang

  • Tác giả: worldlinks.edu.vn
  • Đánh giá: 3 ⭐ ( 1430 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang cố gắng tập trung vào một hình ảnh theo chiều ngang bằng cách sử dụng css, Tôi đang hiển thị hình ảnh của mình trên màn hình với mã HTML sau: Tôi đang xén hình ảnh của mình vì tôi chỉ muốn hiển thị một số hình ảnh và tôi đang sử dụng css sau:img

Làm cách nào để căn giữa hình ảnh (nền) trong div?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 1248 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] #doit { background: url(url) no-repeat center; }

Hướng dẫn căn giữa hình ảnh trong html mới nhất 2020

  • Tác giả: hoclamweb.com.vn
  • Đánh giá: 5 ⭐ ( 9639 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Căn giữa hình ảnh trong html là một trong những keyword được search nhiều nhất trên Google về chủ đề căn giữa hình ảnh trong html. Trong bài viết này, hoclamweb.vn sẽ viết bài viết Hướng dẫn căn giữa hình ảnh trong html mới nhất 2020.

Cách Canh Giữa Hình Ảnh Bằng Css – Theme WordPress Đẹp | Theme WordPress Free | Template Web Free

  • Tác giả: theme4u.biz
  • Đánh giá: 3 ⭐ ( 1440 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Việc canh giữa theo chiều ngang thì rất dễ, ta chỉ cần để thuộc tính “text-align:center” là có thể làm được điều đó, nhưng canh giữa theo chiều dọc và chiều ngang cùng mọt lúc thì như thế nào? mình nghĩ không phải ai cũng biết điều này.

Hình ảnh trong HTML

  • Tác giả: tedu.com.vn
  • Đánh giá: 3 ⭐ ( 7434 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để thêm và tùy chình hình ảnh trong HTML5

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