Một trang web đáp ứng có thể điều chỉnh kích thước màn hình và kích thước thiết bị mà nó đang được xem. Cùng với khả năng phản hồi của trang web, hình ảnh và văn bản cũng cần phải được căn chỉnh và phản hồi. Hình ảnh được căn chỉnh là những hình ảnh bao bọc văn bản xung quanh chúng. Trong khi văn bản được căn chỉnh là văn bản trông giống như toàn bộ đoạn văn.
Bài viết này sẽ xem xét phương pháp căn chỉnh hình ảnh và văn bản một cách linh hoạt.
Làm cách nào để căn chỉnh hình ảnh và văn bản một cách linh hoạt?
Nội dung bao gồm hình ảnh và văn bản có thể được căn chỉnh đáp ứng bằng cách sử dụng Bootstrap. Để cung cấp phần trình diễn, chúng tôi đã liệt kê hai ví dụ:
- Căn giữa văn bản theo chiều dọc và hình ảnh theo chiều ngang.
- Căn trái văn bản và hình ảnh phản hồi.
Ví dụ 1: Căn giữa văn bản theo chiều dọc và hình ảnh theo chiều ngang
Trước tiên, hãy thử căn giữa hình ảnh theo chiều ngang và văn bản theo chiều dọc. Vì mục đích đó, hãy làm theo các hướng dẫn được cung cấp dưới đây:
Bước 1: Tạo cấu trúc HTML
Trong khi tạo cấu trúc HTML, trước tiên, hãy liên kết “ Khởi động ” và cả tệp CSS bên ngoài. Sau đó, tạo một Bước 2: Áp dụng CSS Trên thùng chứa: TRÊN Trên văn bản: Có thể quan sát thấy văn bản được căn giữa theo chiều dọc và hình ảnh được căn giữa theo chiều ngang: Ví dụ 2: Căn trái văn bản và hình ảnh phản hồi Trong ví dụ đã cho này, hình ảnh và văn bản sẽ được căn trái. Với mục đích đó, hãy thực hiện theo các hướng dẫn từng bước dưới đây: Bước 1: Tạo cấu trúc HTML Mã HTML giống như trên, được sử dụng trong ví dụ. Bước 2: Áp dụng CSS Trên thùng chứa: TRÊN Trên văn bản: Đầu ra xác nhận rằng văn bản và hình ảnh được căn trái: Để căn chỉnh hình ảnh và văn bản một cách linh hoạt, trước tiên, hãy tạo bố cục dạng lưới hoặc linh hoạt trong CSS, sau đó đặt “ căn chỉnh mục ” giá trị tài sản cho “ trung tâm ”. Làm như vậy sẽ căn chỉnh hình ảnh và văn bản một cách linh hoạt trong CSS. Bài viết này đã cung cấp cho người dùng một hướng dẫn đầy đủ để căn chỉnh hình ảnh và văn bản một cách linh hoạt.
< thân hình >
< div lớp học = 'thùng đựng hàng' >
< hình ảnh src = 'test-image.jpg' mọi thứ = 'Hình ảnh thử nghiệm' >
< lớp div = 'chữ' > Đây là một số văn bản. div >
div >
thân hình >
.thùng đựng hàng {
trưng bày: uốn cong ;
căn chỉnh văn bản: giữa;
biện minh-nội dung: trung tâm;
căn chỉnh các mục: giữa;
}
hình ảnh {
chiều rộng tối đa: 100 % ;
chiều cao: tự động;
}
.chữ {
cỡ chữ: 16px;
chiều rộng tối đa: 390px;
}
.thùng đựng hàng {
trưng bày: uốn cong ;
hướng linh hoạt: cột;
căn chỉnh các mục: flex-start;
căn chỉnh văn bản: trái;
}
hình ảnh {
chiều rộng tối đa: 100 % ;
chiều cao: tự động;
}
.chữ {
cỡ chữ: 16px;
chiều rộng tối đa: 390px;
}
Phần kết luận