Css Caption hình ảnh làm đẹp nội dung cho website

Ngày đăng: 31/07/2017 12:48 Chiều

Css Caption hình ảnh làm đẹp nội dung cho website wordpress, thể hiện sự chỉnh chu của bạn đối với khách hàng

Caption hình ảnh đó là nội dung mô tả chú thích hình nhả, việc sử dụng caption cho hình ảnh giúp người đọc hiểu nội dung của hình ảnh đang nói đến chủ đề gì.

Hãy làm đẹp nội dung trong website của bạn, đó cũng như việc bạn tôn trọng khách hàng, người đọc của bạn. Bằng việc dùng CSS bên dưới.

Lưu ý: CSS này chỉ áp dụng website thiết kế bằng wordpress.

Hình bên dưới minh hoạt việc sử dụng caption – chú thích nội dung cho hình ảnh trong website

Sử dụng caption cho hình ảnh trong website wordpress

.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
margin: 5px 0 20px 20px;
}

.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.wp-caption {
width: 100% !Important;
max-width: 100% !Important;
text-align: center;
padding: 10px;
background-color: rgba(0, 0, 0, 0.02);
border: 1px solid #E8E8E8;
box-sizing: border-box;
}
.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.wp-caption img {
max-width: 100%;
width: 100% !Important;
height: auto;
}
.wp-caption p.wp-caption-text {
font-size: 14px;
font-style: italic;
color: #000;
}
.wp-caption p.wp-caption-text {
margin: 0;
margin-top: 10px;
}

Bạn thấy bài viết này thế nào?

Xem thêm bài viết khác: