Làm cách nào để thêm và định vị hình ảnh trong html?

img src cho biết bạn sẽ chèn hình ảnh nào và align = right sẽ đưa hình ảnh đó sang bên phải màn hình và văn bản sẽ bao quanh hình ảnh đó. Như tôi đã nói, đó là một cách đơn giản để làm điều đó và rất hạn chế về các tùy chọn. Căn chỉnh cũng có thể lấy các giá trị của trái, giữa, trên, giữa và dưới. Trên cùng, giữa và dưới cùng có hiệu ứng khác nhau. Hãy thử chúng ra và bạn sẽ thấy

Trong nhiều trường hợp, bạn có thể muốn đặt một hình ảnh lên trên một hình ảnh khác. Có nhiều cách để đạt được điều này bằng cách sử dụng HTML và CSS. Bạn có thể tìm thấy ở đây một số phương pháp đơn giản nhất từ ​​bài học này

Mã HTML-CSS sau đây đặt một hình ảnh lên trên một hình ảnh khác bằng cách tạo một div tương đối được đặt trong luồng của trang. Sau đó, đặt hình nền trước dưới dạng tương đối để div biết nó phải lớn như thế nào. Tiếp theo là đặt hình ảnh lớp phủ dưới dạng tuyệt đối so với phía trên bên trái của hình ảnh đầu tiên

Mã nguồn HTML-CSS

Chức vụ. tương đối - Trong phương thức vị trí tương đối, bạn có thể định vị phần tử so với vị trí bình thường của nó. Trong trường hợp này, bạn nên sử dụng left hoặc right và top hoặc bottom để di chuyển phần tử so với vùng chứa của nó

Chức vụ. tuyệt đối - Khi chúng ta định vị một phần tử là Tuyệt đối, phần tử đó sẽ bị xóa hoàn toàn khỏi quy trình bình thường của tài liệu. Ở Vị trí tuyệt đối, vị trí được đặt thông qua một số tổ hợp thuộc tính trái, phải, trên và dưới

Cách tiếp cận tiếp theo là sử dụng chỉ mục z để đặt một hình ảnh lên trên một hình ảnh khác

Mã nguồn HTML-CSS

chỉ số z

Trong khi các phần tử CSS chồng chéo, khi sử dụng vị trí tuyệt đối và tương đối, hành vi mặc định là có các phần tử đầu tiên bên dưới các phần tử sau. Trong những trường hợp này, chúng ta có thể kiểm soát việc phân lớp các phần tử được định vị bằng cách sử dụng thuộc tính chỉ mục z. Khi sử dụng thuộc tính chỉ mục z, bạn có thể chỉ định hộp nào xuất hiện trên hộp kia

Bạn gặp sự cố khi căn chỉnh hình ảnh trên trang web của mình? . Để hiển thị hình ảnh theo cách căn chỉnh ưa thích trên trang web của mình, bạn có thể sử dụng khai báo float hoặc text-align trong CSS. Chúng ta hãy xem xét cách sử dụng float và căn chỉnh văn bản chi tiết hơn

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

Khi bạn muốn bọc văn bản xung quanh một hình ảnh giống như một bài báo, thuộc tính này sẽ làm nổi hình ảnh sang trái hoặc phải trong đoạn văn. Hơn nữa, nó sẽ không tạo ra nhiều khoảng trắng

[a] Hình ảnh nổi bên trái

Văn bản từ Wikipedia

[b] Hình nổi sang bên phải

Văn bản từ Wikipedia

Sử dụng thuộc tính Text-align

Another way to align image to the left, centre or right of the page is to use the text-align property. The html code uses the