Question

我一直在这里寻找并找到了几个好的答案，但仍然没有解决它。我希望实现像in this image这样的东西。

每张照片都有5张小图片。我尝试了这个，但你可以看到数字不在中心（仅测试第一行）。

＆＃13;

.grid-img {
display: inline-block;
}

＆＃13;

<div class="grid-img">
<p>1</p>
    <img src="img1" alt="image1">
</div>
<div class="grid-img">
<p>2</p>
    <img src="img2" alt="image2">
</div>
<div class="grid-img">
<p>3</p>
    <img src="img3" alt="image3">
</div

＆＃13;

Answer 1

检查一下。 text-align: center;会将号码放在中心位置。在第3个div之后插入<br/>。请参阅下面的更新代码。

.grid-img {
  display: inline-block;
  text-align: center;
}

<div class="grid-img">
  <p>1</p>
  <img src="img1" alt="image1">
</div>
<div class="grid-img">
  <p>2</p>
  <img src="img2" alt="image2">
</div>
<div class="grid-img">
  <p>3</p>
  <img src="img3" alt="image3">
</div>
<br/>
<div class="grid-img">
  <p>4</p>
  <img src="img1" alt="image1">
</div>
<div class="grid-img">
  <p>5</p>
  <img src="img2" alt="image2">
</div>

网格中的图像和中心的描述

1 个答案: