Một cách đơn giản chèn 1 ảnh nhỏ vào trước 1 dòng hay 1 đoạn văn bản nào đó trong blog là sử dụng trực tiếp lệnh align cho thẻ img, cách làm như sau:
1. Ảnh và văn bản nằm cân đối trên 1 hàng :

Ta chỉ cần chèn đoạn code màu đỏ vào trong thẻ img là được
CODE: <img src="link ảnh" align="middle" />
2. Ảnh và văn bản được căn lề trên trùng nhau:

CODE: <img src="link ảnh" align="top" />
3. Ảnh và văn bản được căn lề dưới trùng nhau:

CODE: <img src="link ảnh" align="bottom" />
sau khi chèn ảnh, ta thấy ảnh và đoạn văn bản gần nhau quá, trông không đẹp

vì vậy có thể thêm đoạn code sau để điều chỉnh khoảng cách của ảnh và đoạn văn bản:
margin: 0pt 10px 0px 0pt;
<img align="bottom" src="link ảnh" style="border: 0px; color: #29303b; font-family: Arial, sans-serif; font-size: 13px; margin: 0pt 10px 0px 0pt;" />
Trong đó:
0pt : ảnh và văn bản dịch xuống
10px : khoảng cách giữa ảnh và văn bản (chữ dịch sang phải)
0px : đoạn văn bản dịch xuống
0pt : cả chữ và văn bản dịch sang phải
Điều chỉnh thông số trên cho phù hợp.
Không có nhận xét nào:
Đăng nhận xét