CSS cho hình ảnh trong wordpress

Ngày đăng: 06/08/2016 13:42 Chiều

Khi thiết kế website bằng wordpress, việc sử dụng css cho theme của bạn đôi khi làm mất đi một số thuộc tính nhỏ nhưng rất quan trọng.

Ví dụ: khi happiweb canh hình ở giữa nội dung, trong admin wordpress thì được nhưng hiển thị thì lúc nào cũng canh trái, việc này cho css làm ảnh hưởng.

Nếu bạn gặp trường hợp như thế này, vui lòng tham khảo đoạn css bên dưới: việc canh hình ở giữa, trái , phải, caption của hình bây giờ thì hoàn toàn nằm trong tầm tay của bạn.

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

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

Đoạn CSS trên nhỏ nhưng rất hữu ích cho người nào tự code theme wordpress. Chúc bạn tìm được sự happi trong bài viết này.