我怎样才能在图片的中心得到图片下面的文字？

Question

我想把文字放在图像下面，但它必须是水平的，在图像的中心。不是在页面的中心，因为我有3张图片，我也想对它们做同样的处理。有人知道答案吗？

这就是我现在所拥有的。我玩过空白处，但正如你所看到的，它并不完美地位于图像的中心。我不知道有别的办法可以做到这一点，不玩空白处。

​

这是我的密码：

<section class="people">
        <h1>Our people</h1>
        <div class="putin">
            <img src="images/People/poetin.png" class="img1" alt="poetin">
            <p>Vladimir Putin</p>
        </div>
        <div class="stalin">
            <img src="images/People/stalin.png" class="img1" alt="stalin">
            <p>Joseph Stalin</p>
        </div>
        <div class="peter">
            <img src="images/People/peter.png" class="img1" alt="peter">
            <p>Peter the Great</p>
        </div>
    </section>

我的CSS：

.people {
    width: 100%;
    height: 60vh;
    background-color: #f1f1f1;
}



.people h1 {
    text-align: center;
    padding-top: 45px;
}

.putin p,
.stalin p,
.peter p {
    margin-top: 280px;
    margin-left: 17.66%;
    float: left;
    position: absolute;
    text-align: center;
    font-weight: bold;
}

.stalin p {
    margin-left: 47%;
}

.peter p {
    margin-left: 74.33%;
}

.img1 {
    float: left;
    height: 200px;
    width: auto;
    margin-left: 15%;
    margin-top: 60px;
    cursor: pointer;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.img1:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

Answer 1

使用px值和边距等来定位所有东西是非常困难的，而且结果往往没有响应性。

而不是设置这些，您可以使用CSS网格与布局定义为网格模板-区域。

在这个简单的片段中，标题的区域占据了第一行的整个区域，图像的区域各占第二行的三分之一，网格被布置，这样项目就可以用“空间-四周围”来对齐，这意味着自由空间在项目之间和项目的一侧平均分布。

​

.people {
  width: 100%;
  height: 60vh;
  background-color: #f1f1f1;
  display: grid;
  grid-template-areas: 'H H H' 'I1 I2 I3';
  justify-content: space-around;
}

.people h1 {
  text-align: center;
  padding-top: 45px;
  grid-area: H;
}

.putin {
  grid-area: I1;
}

.stalin {
  grid-area: I2;
}

.peter {
  grid-area: I3;
}

.putin p,
.stalin p,
.peter p {
  text-align: center;
  font-weight: bold;
}

.img1 {
  height: 200px;
  width: auto;
  cursor: pointer;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  border-radius: 50%;
}

.img1:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

<section class="people">
  <h1>Our people</h1>
  <div class="putin">
    <img src="https://picsum.photos/id/1015/250/400" class="img1" alt="poetin">
    <p>Vladimir Putin</p>
  </div>
  <div class="stalin">
    <img src="https://picsum.photos/id/1015/250/400" class="img1" alt="stalin">
    <p>Joseph Stalin</p>
  </div>
  <div class="peter">
    <img src="https://picsum.photos/id/1015/250/400" class="img1" alt="peter">
    <p>Peter the Great</p>
  </div>
</section>

​