bạn có muốn biết làm thế nào không căn giữa một hình ảnh trong DIV? Việc căn giữa hình ảnh trong DIV có thể hữu ích để cải thiện hình thức và tổ chức trang web của bạn cũng như làm nổi bật hình ảnh bạn muốn hiển thị. Căn giữa hình ảnh trong DIV không khó, nhưng nó phụ thuộc vào một số yếu tố, chẳng hạn như loại hình ảnh, kích thước của DIV, kiểu dáng của DIV, v.v.
Trong bài viết này chúng tôi sẽ giải thích cách căn giữa hình ảnh trong DIV bằng HTML và CSS, là những ngôn ngữ lập trình được sử dụng để tạo và thiết kế các trang web. Chúng tôi sẽ chỉ cho bạn một số phương pháp và ví dụ để bạn có thể chọn phương pháp phù hợp nhất với mình.
DIV là gì
Div là một phần tử HTML được sử dụng để tạo các phần hoặc vùng chứa trong một trang web. Điều này có thể chứa các yếu tố khác, chẳng hạn như văn bản, hình ảnh, liên kết, v.v. Ngoài ra, đây là phần tử khối, có nghĩa là nó chiếm toàn bộ chiều rộng của trang và bạn có thể xác định chiều cao và chiều rộng của nó. Div là một phần tử chung, có nghĩa là nó không có ý nghĩa ngữ nghĩa cụ thể. Vì lý do này, nó thường được sử dụng với các thuộc tính lớp hoặc id để đặt tên hoặc danh mục cho div. Nó cũng thường được sử dụng với thuộc tính style hoặc với các biểu định kiểu CSS, để cung cấp giao diện hoặc thiết kế cho div.
Div được sử dụng để tổ chức và cấu trúc nội dung của trang web cũng như áp dụng các thuộc tính kiểu cho trang đó. Với div, bạn có thể tạo một hộp chứa các phần tử khác và có thể căn chỉnh, căn giữa, tô màu, tô bóng, v.v. Định dạng này cũng có thể được sử dụng để tạo cột hoặc hàng, để phân phối nội dung một cách có trật tự và linh hoạt. Nói chung, nó cũng có thể được sử dụng để tạo các hiệu ứng hình ảnh hoặc tương tác, chẳng hạn như hoạt ảnh, chuyển tiếp, biến đổi, v.v.
Cách căn giữa hình ảnh theo chiều ngang
Căn giữa hình ảnh theo chiều ngang trong DIV có nghĩa là căn chỉnh hình ảnh ở giữa chiều rộng của DIV. Có một số cách để làm điều này, nhưng phổ biến nhất là những cách sau:
- Sử dụng thuộc tính text-align: center. Thuộc tính này được áp dụng cho phần tử DIV và khiến tất cả các phần tử trong DIV được căn giữa theo chiều ngang. Ví dụ:
- Sử dụng lề: thuộc tính auto. Thuộc tính này được áp dụng cho phần tử IMG và làm cho hình ảnh có lề trái và lề phải giống nhau, căn giữa theo chiều ngang. Để tính năng này hoạt động, hình ảnh phải có chiều rộng xác định và thuộc loại khối hoặc có thuộc tính display: block. Ví dụ:
- Sử dụng thuộc tính biến đổi: TranslateX(). Thuộc tính này được áp dụng cho phần tử IMG và khiến hình ảnh di chuyển theo chiều ngang một khoảng nhất định so với vị trí ban đầu của nó. Để căn giữa nó theo chiều ngang, bạn phải di chuyển nó 50% chiều rộng sang bên phải. Để nó hoạt động, hình ảnh phải có chiều rộng xác định và thuộc loại khối hoặc có thuộc tính display: block. Ví dụ:
Cách căn giữa hình ảnh theo chiều dọc
Căn giữa hình ảnh theo chiều dọc trong DIV có nghĩa là căn chỉnh hình ảnh ở giữa chiều cao của DIV. Có một số cách để làm điều này, nhưng phổ biến nhất là những cách sau:
- Sử dụng thuộc tính căn chỉnh dọc: giữa. Thuộc tính này được áp dụng cho phần tử IMG và làm cho hình ảnh được căn giữa theo chiều dọc so với đường cơ sở của văn bản. Để tính năng này hoạt động, phần tử DIV phải có chiều cao xác định và phần tử IMG phải thuộc loại nội tuyến hoặc có thuộc tính display: inline. Ví dụ:
- Sử dụng thuộc tính lề trên và lề dưới. Các thuộc tính này được áp dụng cho phần tử IMG và làm cho hình ảnh có lề trên và dưới giống nhau, căn giữa theo chiều dọc. Để hoạt động, phần tử DIV phải có chiều cao xác định và phần tử IMG phải có chiều cao xác định và thuộc loại khối hoặc có thuộc tính display: block. Ví dụ:
- Sử dụng thuộc tính biến đổi: TranslateY(). Lần này nó được áp dụng cho phần tử IMG và làm cho hình ảnh di chuyển theo chiều dọc một khoảng nhất định so với vị trí ban đầu. Để căn giữa nó theo chiều dọc, bạn phải di chuyển nó xuống 50% chiều cao của nó. Để hoạt động, phần tử DIV phải có chiều cao xác định và phần tử IMG phải có chiều cao xác định và thuộc loại khối hoặc có thuộc tính display: block. Ví dụ:
Cách căn giữa hình ảnh trên cả hai trục
Căn giữa hình ảnh trên cả hai trục trong DIV có nghĩa là căn chỉnh hình ảnh ở giữa cả chiều rộng và chiều cao của DIV, đây là phần phức tạp nhất. Có một số cách để làm điều này, nhưng phổ biến nhất là những cách sau:
- Sử dụng thuộc tính text-align: center và thuộc tính Vertical-align: middle. Các thuộc tính này áp dụng tương ứng cho phần tử DIV và phần tử IMG và khiến hình ảnh được căn giữa theo cả chiều ngang và chiều dọc. Để tính năng này hoạt động, phần tử DIV phải có chiều cao xác định và phần tử IMG phải thuộc loại nội tuyến hoặc có thuộc tính display: inline. Ví dụ:
- Sử dụng lề: thuộc tính auto. Ở đây, nó được áp dụng cho phần tử IMG và làm cho hình ảnh có lề bằng nhau ở cả bốn phía, căn giữa cả hai trục. Để hoạt động, phần tử DIV phải có chiều cao xác định và phần tử IMG phải có chiều rộng và chiều cao xác định và thuộc loại khối hoặc có thuộc tính display: block. Ví dụ:
- Sử dụng thuộc tính biến đổi: dịch(). Trong trường hợp này, nó được áp dụng cho phần tử IMG và làm cho hình ảnh di chuyển một khoảng nhất định so với vị trí ban đầu của nó theo cả hai trục. Để căn giữa nó, bạn phải di chuyển nó 50% chiều rộng sang phải và 50% chiều cao xuống dưới. Để hoạt động, phần tử DIV phải có chiều cao xác định và phần tử IMG phải có chiều rộng và chiều cao xác định và thuộc loại khối hoặc có thuộc tính display: block. Ví dụ:
Căn giữa bất kỳ hình ảnh nào
Căn giữa hình ảnh trong DIV có thể hữu ích để cải thiện sự xuất hiện và tổ chức trang web của bạnvà để làm nổi bật hình ảnh bạn muốn hiển thị. Việc căn giữa hình ảnh trong DIV không khó nhưng nó phụ thuộc vào một số yếu tố như loại hình ảnh, kích thước của DIV, kiểu dáng của DIV, v.v.
Trong bài viết này chúng tôi đã giải thích cách căn giữa hình ảnh trong DIV bằng HTML và CSS, là những ngôn ngữ lập trình được sử dụng để tạo và thiết kế các trang web. Chúng tôi đã chỉ cho bạn các phương pháp và ví dụ khác nhau để bạn lựa chọn. cái phù hợp với bạn nhất.
Chúng tôi hy vọng bạn thích bài viết này và bạn đã học được cách căn giữa hình ảnh trong DIV. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy để lại nhận xét cho chúng tôi. Bạn cũng có thể chia sẻ bài viết này với bạn bè hoặc gia đình của bạn, những người cũng thích HTML hoặc CSS. Hãy bắt tay vào làm việc và lên lịch thôi!