Hướng dẫn text under image css - văn bản dưới hình ảnh css

Add a container div for the image and the caption:

    
    Text below the image

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;
}

http://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:

http://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:

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