Mẹo nhỏ cho việc hiển thị ảnh và văn bản trên cùng 1 hàng - 8 July 2010 - All 4 You
Sunday, 26-Mar-2017, 3:40 AM
Welcome Guest | RSS
Main » 2010 » July » 8 » Mẹo nhỏ cho việc hiển thị ảnh và văn bản trên cùng 1 hàng
10:24 PM
Mẹo nhỏ cho việc hiển thị ảnh và văn bản trên cùng 1 hàng
[FD's BlOg] - Thông thường việc hiển thị ảnh và văn bản trên cùng 1 hàng chỉ dùng để trang trí các list hay danh sách nào đó. Và phổ biến nhất là dùng các đoạn code CSS, như thế tiện hơn. Đó là sử dụng chung và đồng nhất, còn việc sử dụng riêng lẻ thì sao?, ví dụ khi ta muốn chèn 1 ảnh icon nhỏ vào trước 1 menu hay 1 dòng nào đó.


Thông thường khi ta chèn 1 ảnh nhỏ vào trước 1 dòng hay 1 đoạn văn bản nào đó thì ảnh sẽ nằm lệnh so với các đoạn văn bản, ví dụ như bên dưới :

ĐOẠN VĂN BẢN

Ta thấy là lề dưới của ảnh và đoạn văn bản được căn trùng nhau, như thế trông hơi bị lệch.

Việc này thì sẽ dễ dàng khắc phục khi ta dùng lệnh background, ví dụ như bên dưới:

ĐOẠN VĂN BẢN


Tuy nhiên khi dùng lệnh background ta phải sử dụng lênh padding để căn lề, nếu không dùng lệnh padding ta sẽ có kết quả như bên dưới :

ĐOẠN VĂN BẢN


Như thế ta sẽ thấy quá phức tạp khi phải dùng CSS chỉ để chèn 1 ảnh nhỏ vào trên cùng 1 hàng với các đoạn văn bản. Có 1 cách đơn giản hơn nhiều đó là ta sử dụng trực tiếp lệnh align cho thẻ img, như thế ta hoàn toàn có thế căn lề cho ảnh và cho đoạn văn bản.

Ví dụ :
1. Ảnh và văn bản nằm cân đối trên 1 hàng :
ĐOẠN VĂN BẢN

Để làm điều này 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" />


Chúc các bạn thành công.
Category: Code | Views: 578 | Added by: all4u | Rating: 0.0/0
Total comments: 1
1  
AFAICT you've coeevrd all the bases with this answer!

Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page