Văn bản căn chỉnh hình ảnh css

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

Că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

float: right; margin-right: 15px;">

Căn giữa

Để nhúng hình ảnh vào văn bản, hãy sử dụng đoạn mã sau

float: right; margin-right: 15px;">

Đ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

Căn chỉnh trên và dưới

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

float: right; margin-right: 15px;">

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

float: right; margin-right: 15px;">

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

Hình ảnh nổi CSS

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”

Hình ảnh nổi ngay với gói văn bản

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”)

float: right; margin-right: 15px;">

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ề

#hp  {
float: right;    
 margin: 0 0 0 15px;
}

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

Hình ảnh nổi còn lại với gói văn bản

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ế

#hp  {
float: left;    
 margin: 0 15px 0 0;
}

không có phao

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.

#hp  {
float: none;    
 margin: 0 15px 0 0;
}

Xóa phao

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ị

• không - cho phép các phần tử nổi ở cả hai bên
• bên trái - không cho phép các phần tử nổi ở phía bên trái
• bên phải– không cho phép các phần tử nổi ở phía bên phải
• cả hai - không cho phép các phần tử nổi ở hai bên
• kế thừa - kế thừa giá trị rõ ràng của cha mẹ của nó

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 cao