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
Thuộc tính float trong CSS sẽ làm nổi một hình ảnh sang trái hoặc phải trong đoạn văn. Văn bản trong đoạn văn sẽ bao quanh hình ảnh. Thuộc tính căn chỉnh văn bản trong CSS sẽ định vị hình ảnh ở bên trái, giữa hoặc bên phải của trang. Văn bản đi kèm sẽ hoạt động như một khối và đặt nó trước hoặc sau hình ảnh, tùy thuộc vào căn chỉnh đã chọ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
[a] Căn trái
Hình ảnh sẽ đi theo căn trái của khối văn bản
[b] Căn chỉnh tâm
Hình ảnh sẽ theo căn giữa của khối văn bản
[c] Căn phải
Hình ảnh sẽ đi theo căn chỉnh bên phải của khối văn bản
Tùy thuộc vào nhu cầu của mình, bạn có thể sử dụng thuộc tính “float” hoặc “text-align” để căn chỉnh hình ảnh hiệu quả hơn. Để tìm hiểu thêm về mã hóa HTML & CSS, bạn có thể tham khảo sách có sẵn trong Thư viện
Nếu bạn muốn trang web của mình trông đẹp và hài hòa, thì đoạn mã này là dành cho bạn. Nó sẽ giúp bạn tìm hiểu cách căn chỉnh văn bản bên cạnh hình ảnh theo chiều dọc. Hãy đi sâu vào và học cách làm điều đó cùng nhau
- Đặt ba
các phần tử và đặt cho chúng các tên lớp "container", "image" và "text"
- Đặt hình ảnh của bạn trong vòng thứ hai
phần tử với sự trợ giúp của
Paris là một trong những thành phố đẹp nhất nước Pháp
Bạn có thể tạo kiểu cho văn bản với các thuộc tính khác, chẳng hạn như phông chữ, màu sắc, trang trí văn bản, đổ bóng văn bản, v.v.
HTML và CSS đều có thể được sử dụng để hiển thị hình ảnh căn chỉnh và nổi trên trang web của bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách sử dụng HTML để căn chỉnh hình ảnh thành văn bản [hoặc các phần tử trang khác] và cách sử dụng CSS để float images, wrapping text around it as you’d see in a newspaper or magazine.Trước khi chúng ta đi sâu vào mã, hãy xem sự khác biệt giữa hình ảnh được căn chỉnh và nổi
- Hình ảnh được căn chỉnh. bằng cách sử dụng căn chỉnh hình ảnh, bạn có thể chọn vị trí bên trái, giữa hoặc bên phải. Văn bản không chạy xung quanh hình ảnh mà sẽ được đặt trước hoặc sau hình ảnh [dưới dạng một khối], tùy thuộc vào cách căn chỉnh đã chọn.
- Hình ảnh nổi. khi hình ảnh nổi, văn bản sẽ chạy xung quanh hình ảnh. Bạn có thể dễ dàng xác định các quy tắc CSS bổ sung để đảm bảo có đủ khoảng trắng xung quanh hình ảnh. Quy tắc nổi cũng thường được sử dụng để sắp xếp hình ảnh theo hàng ngang, như bạn thấy với bộ sưu tập hình ảnh và bộ chọn hình thu nhỏ.
Trước tiên, chúng tôi sẽ thực hiện các bước để căn chỉnh hình ảnh bằng HTML, sau đó chỉ cho bạn cách làm nổi hình ảnh bằng CSS
Căn chỉnh hình ảnh HTML
Thực hiện theo các bước bên dưới để căn chỉnh hình ảnh sang bên trái, ở giữa hoặc bên phải trang web của bạn
Căn trái
Sử dụng mã HTML sau để căn chỉnh hình ảnh sang trái
Như bạn có thể thấy, hình ảnh được căn trái, với văn bản hiển thị ở bên phải Bây giờ hãy sử dụng mã HTML này để căn chỉnh hình ảnh ở bên phải của văn bản Để nhúng hình ảnh vào văn bản, hãy sử dụng đoạn mã sau Đoạn mã này sẽ nhúng hình ảnh vào các đoạn văn, nhưng nó không phải là một bố cục rõ ràng Bên cạnh căn trái, phải và căn giữa, bạn có thể sử dụng căn trên và căn dưới để xác định cách sắp xếp của văn bản và hình ảnh Với căn chỉnh trên cùng, hãy chú ý cách văn bản Sed feugiat tincidunt tellus căn chỉnh với trên cùng bên phải của hình ảnh Với căn chỉnh dưới cùng, thay vào đó, cùng một văn bản sẽ căn chỉnh ở dưới cùng bên phải của hình ảnh Mặc dù căn chỉnh hình ảnh HTML cung cấp các giải pháp cho bố cục cơ bản, hình ảnh nổi với mã CSS có thể mang lại sự linh hoạt hơn Thực hiện theo các bước sau để làm nổi hình ảnh trên trang web của bạn sang phải hoặc trái và sử dụng định dạng “không nổi” hoặc “xóa” Trong ví dụ này, chúng tôi bao gồm thẻ hình ảnh trong tệp HTML của mình, nhưng xác định hình ảnh bằng ID [“hp”] Mã định dạng được gọi từ một tệp CSS riêng, bao gồm float. quy tắc bên phải, cộng với một số khoảng trắng bổ sung, nhờ quy tắc lề Như bạn có thể thấy, bố cục thu được gọn gàng hơn, với dòng chữ bên dưới hình ảnh Với hình ảnh được gắn thẻ chính xác trong tệp HTML, bạn chỉ cần chỉnh sửa quy tắc CSS để thử nghiệm các bố cục thay thế Sử dụng phao. none quy tắc để hiển thị hình ảnh trong văn bản mà không có bất kỳ dòng nào. Bạn có thể giữ lại quy tắc lề [nếu muốn] cho khoảng cách. Khi làm nổi hình ảnh, điều quan trọng là bạn phải sử dụng đúng quy tắc rõ ràng. Hình ảnh nổi [và các phần tử web khác] sẽ chồng lên nhau nếu bạn không "xóa" hình nổi. Đảm bảo sử dụng quy tắc rõ ràng sau mỗi phần có hình ảnh nổi Trong ví dụ này, chúng tôi có hai phần [sử dụng thẻ div ], một chứa hình ảnh và phần thứ hai chứa hình ảnh, một số văn bản . Phần đầu tiên được định vị bằng float. left và bạn có thể thấy rằng nó chồng lên phần thứ hai. Sự trùng lặp xảy ra do chúng tôi chưa sử dụng quy tắc rõ ràng. Áp dụng quy tắc CSS sau cho div thứ hai Bây giờ bạn có thể thấy rằng hai phần không còn chồng chéo nữa. Quy tắc rõ ràng có thể được sử dụng với một số giá trị Hãy dành chút thời gian để thử nghiệm các quy tắc CSS như float và clear và bạn sẽ sớm thành thạo căn chỉnh hình ảnh và bố cục trang nâng caoCăn phải
Căn giữa
Hình ảnh nổi CSS
Hình ảnh nổi ngay với gói văn bản
#hp {
float: right;
margin: 0 0 0 15px;
}
Hình ảnh nổi còn lại với gói văn bản
#hp {
float: left;
margin: 0 15px 0 0;
}
không có phao
#hp {
float: none;
margin: 0 15px 0 0;
}
Xóa phao
Chủ Đề