Cách canh giữa hình ảnh trên Web.

Cách canh giữa hình ảnh trên Web đơn giản. Khi mà bạn làm việc với HTML mà không có một công cụ như Dreamware và những công cụ tương tự. Rất khó khi ta không nhớ nhiều về HTML. Vì vậy để canh giữa hình ảnh trên Web. Hãy xem bài viết dưới đây.

Mặc dù nó không quá khó khăn, nhưng canh giữa các hình ảnh trên trang web của bạn có thể có liên quan nhiều thứ hơn bạn nghĩ. Lý do chính là thẻ  <img> là một yếu tố nội tuyến. Vì vậy nó hoạt động hơi khác biệt so với các thẻ còn lại.

Cách canh giữa hình ảnh trên Web.

Cách canh giữa hình ảnh trên Web.

Một số cách canh giữa hình ảnh sử dụng HTML;

Những người khác sử dụng CSS, và một số được coi là “đúng” hơn những người khác vì họ không bị phản đối. Để tiếp tục, hãy chọn một phương pháp từ danh sách bên dưới và làm theo hướng dẫn.

  • Sử dụng thuộc tính style
  • Chuyển đổi sang một phần tử block
  • Sử dụng thẻ center

Sử dụng thuộc tính style

Để hỗ trợ trong HTML5 , bạn nên sử dụng thuộc tính style với giá trị text-align:center bên trong của một phần tử block; chẳng hạn như thẻ <p> </ p> .

Ví dụ HTML code:

<p style = “text-align: center;”> <img src = “logo.gif” alt = “Logo”> </ p>

Mẹo: Thêm một style nội tuyến như được hiển thị ở trên chỉ nên được thực hiện một lần. Nếu bạn cần phải canh giữa nhiều hình ảnh. Bạn nên sử dụng các gợi ý dưới đây và tạo ra một lớp CSS để giúp giảm mã dự phòng và tăng tốc độ trang web của bạn.

Ví dụ về canh giữa hình ảnh sử dụng mã trên

Chuyển đổi sang một phần tử block

Bằng cách thêm quy tắc vào đầu trang của bạn (ví dụ dưới đây) hoặc tệp CSS được import local. Bạn có thể chuyển phần tử <img> nội tuyến thành một phần tử block. Do đó cho phép nó được căn chỉnh đúng cách.

Ví dụ HTML code:

<style type = "text / css"> 
.centerImage 
{ 
text-align: center; 
hiển thị: khối; 
} 
</ style>

Với mã này, bạn có thể áp dụng lớp centerImage vào một thẻ <img> mà không cần phải làm nó trong một phần tử block. Phương pháp này hoạt động cho nhiều hình ảnh.

Ví dụ về mã code canh giữa hình ảnh:

<img src = "logo.gif" class = "centerImage" alt = "CH Logo" chiều cao = "120" width = "350">

Sử dụng thẻ <center>

Bạn có thể căn giữa hình ảnh bằng cách đóng thẻ <img> trong thẻ <center> </ center> . Hành động này canh giữa nó, và chỉ có vậy, hình ảnh trên trang web. Cần lưu ý rằng phương pháp này không được tán thành trong HTML5 và sẽ không phải lúc nào cũng hoạt động trong tất cả các trình duyệt đang phát triển.

Chúng tôi chỉ khuyên bạn nên sử dụng phương pháp này nếu không có đề xuất nào khác đã đề cập ở trên làm việc. Khi bạn đang cố gắng để canh giữa một hình ảnh.

Ví dụ HTML code:

<center> <img src = "logo.jpg" alt = "hình ảnh nào hiển thị" chiều cao = "150" width = "200"> </ center>
Cảm ơn các bạn đã đọc bài viết: Cách canh giữa hình ảnh trên Web.
Chúng tôi đang nhận:
  • Cài đặt theme wordpress như Demo với giá 100k. Chi tiết xem tại đây
  • Thiết kế Web 199k. Xem chi tiết tại đây

Add Comment