html - 在单个帖子页面 Wordpress 上居中 'the_post_thumbnail'

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，但如果您使用的是 Bootstrap ，则应使用它们的辅助类 .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>