Add a container div for the image and the caption:
Then, with a bit of CSS, you can make an automatically wrapping image gallery:
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
//jsfiddle.net/ZhLk4/1/
Updated answer
Instead of using 'anonymous' div and spans, you can also use the HTML5 figure
and figcaption
elements. The advantage is that these tags add to the semantic structure of the document. Visually there is no difference, but it may [positively] affect the usability and indexability of your pages.
The tags are different, but the structure of the code is exactly the same, as you can see in this updated snippet and fiddle:
Text below the image
//jsfiddle.net/ZhLk4/379/
- Trang chủ
- Tham khảo
- CSS
- Thuộc tính text-decoration
Định nghĩa và sử dụng
Thuộc tính text-decoration thiết lập các trang trí thêm cho text.
Cấu trúc
tag { text-decoration: giá trị; }
Với giá trị như sau:
text-decoration | none | text-decoration: none; | Định dạng văn bản bình thường, đây là dạng mặc định. |
underline | text-decoration: underline; | Xác định đường gạch bên dưới văn bản. | |
overline | text-decoration: overline; | Xác định đường gạch bên trên văn bản. | |
line-through | text-decoration: line-through; | Xác định đường gạch ngang văn bản. | |
blink | text-decoration: blink; | Xác định văn bản nhấp nháy. | |
inherit | text-decoration: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha [thành phần bao ngoài]. |
Ví dụ
Mô tả
Line under text
Line Over text
Line Over through
Line Over blink
text-decoration
none
text-decoration: none;
Định dạng văn bản bình thường, đây là dạng mặc định.
underline
text-decoration: underline;
p.lineUnder { text-decoration: underline; } p.lineOver { text-decoration: overline; } p.lineThrough { text-decoration: line-through; } p.lineBlink { text-decoration: blink; }
Xác định đường gạch bên dưới văn bản.
none
text-decoration: none;
Định dạng văn bản bình thường, đây là dạng mặc định.
underline
text-decoration: underline;
Xác định đường gạch bên dưới văn bản.
overline
text-decoration: overline;
Tìm hiểu cách đặt văn bản qua một hình ảnh.
Văn bản hình ảnh
Phía dưới bên trái
Trên cùng bên trái
Trên cùng bên phải
Góc phải ở phía dưới
Tập trung
Hãy tự mình thử »
Để tìm hiểu thêm về cách tạo kiểu hình ảnh, hãy đọc hướng dẫn hình ảnh CSS của chúng tôi.
Để tìm hiểu thêm về CSS đặt ra, hãy đọc hướng dẫn vị trí CSS của chúng tôi.Tìm hiểu cách đặt văn bản qua một hình ảnh.
Văn bản hình ảnh