センター 'the_post_thumbnail'を1つのポストページにワードプレス

Question

これは先日働いたと思います。

画像を1つのポストページの中央に配置することはできません。このような単純なページには必要ないはずのブートストラップも試してみました。それは、投稿ページのアーカイブとホームページの最新投稿に完全に働きました。

私には何が欠けていますか？それは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; 
}