Chèn ảnh vào trước đoạn văn bản trong blog


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 :

ĐOẠN VĂN BẢN


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:


ĐOẠN VĂN BẢN

CODE: 
 <img src="link ảnh" align="top" />


3. Ảnh và văn bản được căn lề dưới trùng nhau:


ĐOẠN VĂN BẢN

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


ĐOẠN VĂN BẢN


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.




Đăng nhận xét

/