Thủ thuật WordPress tự động canh giữa hình ảnh bài viết

Thủ thuật WordPress tự động canh giữa hình ảnh bài viết – Có thể nói wordpress một mã nguồn mở khá mạnh mẽ với sự hỗ trợ xây dựng một website, blog trong vài phút – Nếu bạn đang sử dụng mã nguồn này thì trong quá trình sử dụng bạn cũng gặp một số trường hợp không như mong muốn.

Một trong những vấn đề mà blog thủ thuật giới thiệu dưới đây nếu bạn có gặp phải thì hãy áp dụng phương pháp này để chỉnh sửa lại nhé – Có thể nói giao diện là thành phần rất quan trọng của blog – Và trong nội dung bài viết hình ảnh là một phần không thể thiếu nhưng không biết vì sao khi chèn hình ảnh vào bài viết cho dù bạn đã canh giữa thì hình ảnh vẫn không hiển thị như ý của bạn vậy phải làm sao? – Trường hợp này xảy ra với một số “Theme” chứ không phải tất cả, hãy cùng blog thủ thuật tìm cách khắc phục vấn đề nêu trên!

Thủ thuật WordPress tự động canh giữa hình ảnh bài viết

Thủ thuật WordPress tự động canh giữa hình ảnh trong bài viết

Đầu tiên hãy đăng nhập vào trang quản trị blog của mình sau đó chọn  Giao diện > Công cụ biên tập

xoa-bai-viet

Tiếp tục, nhìn sang menu bên trái và tìm file “Style.css” và Kích chọn

Thủ thuật WordPress tự động canh giữa hình ảnh trong bài viết

Cuối cùng hãy dán toàn bộ đoạn  code sau đây vào cuối file  sau đó bạn nhớ lưu cài đặt lại!

/* =WordPress Core
————————————————————– */
.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;
}

Sau khi lưu lại – bạn quay ra trang chủ và xem kết quả nhé!

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Bài viết có ích cho bạn?

Average rating / 5. Vote count:

16 bình luận về “Thủ thuật WordPress tự động canh giữa hình ảnh bài viết”

  1. Các bạn cứ làm theo hướng dẫn của Admin, nếu hình ảnh vẫn chưa vào giữa thì các bạn thêm dòng “text-align:Center;” giống như mình thì sẽ chạy được nha.
    Cảm ơn Admin.

    .wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    text-align:Center;
    margin:0;
    padding:0 4px 5px;
    }

    Trả lời
    • Vậy mình hướng dẫn cách xác định thuộc tính đó nhé!

      Bạn chuột phải vô trang Web sau đó chọn kiểm tra (hoặc nhấn Ctrl + Shift + I) sau đó hãy xác định khối caption và lúc này bạn sẽ thấy thuộc tính của nó và bạn hãy thay đổi thuộc tính là được! (dùng trình duyệt Google Chrome hoặc cốc cốc!

      Trả lời
  2. Mình có một trang WP là http://www.daycon.com.vn – Hiện tại đang gặp một sự bất tiện là khi viết caption cho ảnh nội dung, đoạn caption đó bị căn trái. Mình muốn nó tự căn giữa thì phải làm thế nào bạn? (Căn giữa đoạn mô tả cho ảnh chứ không phải ảnh).

    Hiện nay mình bỏ qua cái caption của ảnh và tự chèn thêm một dòng dưới ảnh để làm mô tả, chọn căn lề giữa. 🙁

    Trả lời
    • Chào bạn – Vậy bạn hãy vào tập tin style.css của theme bạn đang dùng và tìm đoạn code tương tự và sửa lại nhé!

      div#largecol div#interior_wrapper img {
      float: left; /* đổi left thành center bạn nhé */
      display: inline;
      padding: 3px;
      background-color: #fff;
      margin: 5px 15px 0px 0px;
      }

      Chúc bạn thành công!

      Trả lời

Viết một bình luận