Hình ảnh có thể dễ dàng căn chỉnh và nổi hình ảnh với CSS. Chúng có thể được căn chỉnh và nổi để cho phép các hình ảnh được đặt ở các vị trí cụ thể trên trang. Cách bạn muốn hiển thị hình ảnh sẽ xác định xem bạn sẽ căn chỉnh hay nổi hình ảnh.CSS. They can be aligned and floated to allow the images to be placed in particular locations on the page. How you want to display the images will determine whether you will align or float the image. Hình ảnh căn chỉnh không bao bọc văn bản xung quanh chúng. Căn chỉnh hình ảnh sẽ chỉ định vị hình ảnh bên trái, phải hoặc giữa với văn bản theo sau và sau hình ảnh. Căn chỉnh lá khá nhiều không gian trắng trên trang web của bạn. Bạn sẽ thấy không gian trắng khi bạn đi mặc dù phần căn chỉnh. do not wrap text around them. Aligning images will only position the image left, right, or
center with the text following before and after the image. Aligning leaves quite a bit of white space on your site. You will see the white space when you go though the aligning section. Một hình ảnh nổi sẽ cho phép văn bản quấn quanh hình ảnh như một cuốn sách hoặc tờ báo thông thường sẽ làm. Hình ảnh cũng có thể được thả nổi để chúng xuất hiện theo chiều ngang trên trang web của bạn. Điều này là tốt để hiển thị hình ảnh như một phòng trưng bày. Các phần sau đây sẽ giải thích cách nổi và căn chỉnh hình ảnh bằng CSS. will allow the text to wrap around the image like a regular book or newspaper would do. Images can also be floated so they appear horizontally on your site. This is good for displaying images like a gallery. The following sections will explain how to float and align images
using CSS. Hình ảnh có thể được căn chỉnh bên trái, phải và trung tâm bằng cách sử dụng thẻ Div và kiểu CSS nội tuyến. Văn bản không bao bọc xung quanh hình ảnh đơn giản là căn chỉnh. Sau đây giải thích cách căn chỉnh hình ảnh của bạn trái, phải và giữa bằng CSS.Text DOES NOT wrap around images that are simply aligned. The following explains how to align your images left, right, and center using CSS. Dòng mã bên dưới là để sắp xếp một hình ảnh bên trái. <div style="text-align: left"><img src="image/your-image.png" width="100" /></div>  Trung tâm căn chỉnhDòng mã sau đây là để tập trung một hình ảnh. <div style="text-align: center"><img src="image/your-image.png" width="100" /></div> Đúng đúngDòng mã sau đây chứa thuộc tính CSS để sắp xếp đúng. <div style="text-align: right"><img src="image/your-image.png" width="100" /></div> Hình ảnh nổi bằng CSSHình ảnh nổi cho phép hình ảnh thẳng hàng với nhau và cho phép văn bản quấn quanh hình ảnh. Sau đây sẽ giải thích hình ảnh căn chỉnh theo chiều ngang và hình ảnh nổi xung quanh văn bản. Hình ảnh nổi còn lại để bọc văn bản<img style="float: left; margin: 0px 15px 15px 0px;" src="image/your-image.png" width="100" /> Nullam cursus varius Tellus, id laoreet magna hendrerit tại. Nulla ngồi ampe purus tại nunc blandit ultricies eu một urna. Proin euismod porttitor neque id ultricies. Proin faucibus convallis elit. Maecenas Rhoncus arcu tại Arcu. Proin Libero. Proin adipiscing. Trong quis lorem vitae elit pretium. Nullam Ligula urna, Adipiscing NEC, Iaculis UT, Elementum non, Turpis. Fusce Pulvinar. Quan trọng! Hình ảnh nổi sẽ chồng lên nhau nếu phao không được xóa. Hãy chắc chắn rằng bạn đang đặt một mã nổi rõ ràng sau mỗi phần mà hình ảnh của bạn đang nổi. Dưới đây là mã để xóa phao của bạn. Floated images will overlap each other if the float is not cleared. Make sure you are placing a clear float code after each section your image is floating in. Below is the code to clear your floats. <br style="clear:both" /> Đây là một ví dụ: <p><img style="float: left; margin: 0px 15px 15px 0px;" src="image/your-image.png" width="100" />Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.<br style="clear: both;" /></p> Hình ảnh nổi ngay để bọc văn bản<img style="float: right; margin: 0px 0px 15px 15px;" src="image/your-image.png" width="100" /> Nullam cursus varius Tellus, id laoreet magna hendrerit tại. Nulla ngồi ampe purus tại nunc blandit ultricies eu một urna. Proin euismod porttitor neque id ultricies. AENEAN SED TURPIS. Pellentesque cư dân Morbi tristique senectus et netus et malesuada fames ac turpis egestas. DONEC SEM EROS, Ornare UT, Commodo EU, Tempor NEC, Risus. DONEC LAOREET DAPIBUS LIGULA. Trao đổi Orci Leo, Bibendum NEC, Ornare et, Nonummy in, Elit. Donec Interdum Feugiat Leo. Tiền đình ante ipsum primis trong faucibus orci loctus et ultrices posuere cubilia curae; Pellentesque Feugiat ullamcorper ipsum. Hình ảnh nổi bên trái theo chiều ngangĐiều này sẽ sử dụng cùng một mã như trước đây (xem bên dưới). Các hình ảnh chỉ đơn giản được đặt lần lượt để chúng nổi lên theo chiều ngang. <img style="float: right; margin: 0px 0px 15px 15px;" src="image/your-image.png" width="100" /> Hình ảnh nổi nội tuyến với nhau là một cách tốt đẹp để hiển thị hình ảnh của bạn như một bộ sưu tập. Điều này kết thúc làm thế nào để sắp xếp và nổi hình ảnh với CSS. Tham gia cộng đồng của chúng tôi ngay bây giờ để nhận trợ giúp chuyên dụng với HTML và thiết kế, ưu đãi lưu trữ đặc biệt và hơn thế nữa! Trong hướng dẫn tiếp theo, chúng tôi sẽ chỉ cho bạn cách thực hiện menu thả xuống CSS đơn giản. Chúng tôi cũng có một bài viết hữu ích về các kiểu CSS bên ngoài, nội bộ và nội tuyếnalign and float images with CSS. Join our community now to receive specialized help with HTML and design, special hosting offers, and more! In the next tutorial, we will show you how to make a simple CSS Drop Down Menu. We also have a helpful article on External, Internal, and Inline CSS styles Tìm kiếm thêm trợ giúp với CSS? Kiểm tra Giới thiệu của chúng tôi về Hướng dẫn CSS! |
