單個帖子頁面中心'the_post_thumbnail'Wordpress

Question

這讓我開心，因爲我記得前些日子有用。

我無法將圖像居中放在單個帖子頁面上。試過不同的類，甚至實現了bootstrap，這對於這樣一個簡單的頁面來說不應該是需要的。它在帖子頁面存檔和主頁上的最新帖子完美運行。

我錯過了什麼？它在SASS中風格化，不應該與CSS發生衝突。

在此先感謝！

#singlepost{ 
 
    .blog-image { 
 
     margin: 0 auto; 
 
    } 
 
    h1 { 
 
     color: #fff; 
 
     @include PTSansNarrowRegular; 
 
     font-size: 50px; 
 
     color: black; 
 
     line-height: 45px; 
 
     letter-spacing: -1.5px; 
 
     max-width: 900px; 
 
     margin: 0 auto 27px auto; 
 
     /*text-align: center; 
 
     padding: 20px;*/ 
 
    } 
 
    p { 
 
     padding-left: 60px; 
 
     padding-right: 60px; 
 
     text-align: justify; 
 
     padding-bottom: 30px; 
 
    } 
 
}

<? get_header(); ?> 
 
<section id="singlepost"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-12"><h1><? the_title(); ?></h1></div> 
 
      <div class="col-sm-12 image-responsive blog-image"> 
 
       <? the_post_thumbnail('full'); ?> 
 
      </div> 
 
      <div class="col-sm-12"> 
 
       <p><? the_content(); ?></p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>  
 
<? get_footer(); ?>

Answer 1

要居中圖像，你可以在父用text-align: center，但如果你使用引導，你應該使用他們的幫手類.text-center

.blog-image { 
 
    margin: 0 auto; 
 
} 
 

 
h1 { 
 
    color: #fff; 
 
    @include PTSansNarrowRegular; 
 
    font-size: 50px; 
 
    color: black; 
 
    line-height: 45px; 
 
    letter-spacing: -1.5px; 
 
    max-width: 900px; 
 
    margin: 0 auto 27px auto; 
 
    /*text-align: center; 
 
     padding: 20px;*/ 
 
} 
 

 
p { 
 
    padding-left: 60px; 
 
    padding-right: 60px; 
 
    text-align: justify; 
 
    padding-bottom: 30px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section id="singlepost"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-12"><h1><? the_title(); ?></h1></div> 
 
      <div class="col-sm-12 text-center image-responsive blog-image"> 
 
       <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
      </div> 
 
      <div class="col-sm-12"> 
 
       <p><? the_content(); ?></p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

Answer 2

您可以再補充text-align: center;到圖像的父容器

.blog-image { 
    text-align: center; 
}