Question

这让我感到疯狂，因为我记得前几天它已经奏效了。

我无法将图像置于单个帖子页面的中心位置。尝试了不同的类，甚至实现了引导程序，这对于这样一个简单的页面不应该是必需的。它完美地适用于帖子页面存档和主页上的最新帖子。

我错过了什么？它在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>

Answer 2

您只需将text-align: center;添加到图片的父容器

即可

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

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

2 个答案: