在css中对齐图像下方的文本答案

【问题标题】：Align text underneath images in css在css中对齐图像下方的文本
【发布时间】：2017-06-06 20:11:22
【问题描述】：

我想为一个节日制作某种节目页面。我想创建一个下面有少量文字的图像列表。我没有成功将文本放在下面（它总是在图像旁边而不是在下面）。有人可以帮忙吗？

应该是这样的：

[img1] [img2] [img3]

[文本1] [文本2] [文本3]

[img4] [img5]

[文本4] [文本5]

...等等

图片的大小是固定的，所以只有2张图片的行和有3张图片的行大小相同。

到目前为止，这是我的 CSS 代码：

对于文本（大小）：

.prog_big{width:321px; height:434px; margin-left:30px; font-family: Lucida Sans,Calibri; font-size:16px; float:left; text-align:center} 

.prog_small{width:207px; height:283px; margin-left:30px; font-family: Lucida Sans,Calibri; font-size:16px; float:left;text-align:center}

对于图片（大小）：

.poster_big{width:321px; height:434px; margin-left:30px; float:left} 

.poster_small{width:207px; height:283px; margin-left:30px; float:left}

【问题讨论】：

能否贴出相关的html代码？
这是我使用的html代码：
sometext

sometext

sometext

sometext.

sometext

标签： css image

【解决方案1】：

我不认为这真的是一个 CSS 问题。您可以使用这种类型的布局在 HTML 中实现此目的

<figure>
 <img src="your_Image">
 <figcaption>text here</figcaption>
</figure>

【讨论】：

我试过这个，但由于某种原因我失去了图像上的 CSS 布局。
你必须改变 css 来适应标签
好的，我做了更多的更改，它似乎工作了。这些图像现在都在彼此下方，而不是 3 或 2 行。我该如何解决这个问题？
把它们放在不同的数字我相信我必须看到你的代码

【解决方案2】：

Division 和 image 标签不是内联元素。由于这个原因，他们将在屏幕上为每个人创建一个新行。

使用 css "display:inline-block" 使它们内联。他们会肩并肩。

div.first-row div, div.second-row div {
  display:inline-block;
  float:left;
  width:100%;
}

div.first-row div {
  width: 33.3%;
}

div.second-row div {
  width: 50%;
}

div img {
  width:100%;
  height:auto;
}

p {
  text-align:center;
}

<div class='first-row'>
  <div>
    <img src='http://via.placeholder.com/140?text=image'>
    <p>Some Text Here</p>
  </div>
  <div>
    <img src='http://via.placeholder.com/140?text=image'>
    <p>Some Text Here</p>
  </div>
  <div>
    <img src='http://via.placeholder.com/140?text=image'>
    <p>Some Text Here</p>
  </div>
</div>

<div class='second-row'>
  <div>
    <img src='http://via.placeholder.com/140?text=image'>
    <p>Some Text Here</p>
  </div>
  <div>
    <img src='http://via.placeholder.com/140?text=image'>
    <p>Some Text Here</p>
  </div>
</div>

【讨论】：

感谢您的评论。我试过了，但我失去了这个代码的固定尺寸。如何确保图像和文本片段保持不变？
@sadlva 我不明白你对这个答案的问题？

【解决方案3】：

弹性盒解决方案：

.row {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
}

.column {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  margin-right: 10px;
}

p {
  width: 100%;
  text-align: center;
}

<div class="row">
  <div class="column">
    <img src="http://placehold.it/100" />
    <p>Text 1</p>
  </div>
  <div class="column">
    <img src="http://placehold.it/100" />
    <p>Text 2</p>
  </div>
</div>
<div class="row">
  <div class="column">
    <img src="http://placehold.it/60" />
    <p>Text 3</p>
  </div>
  <div class="column">
    <img src="http://placehold.it/60" />
    <p>Text 4</p>
  </div>
  <div class="column">
    <img src="http://placehold.it/60" />
    <p>Text 5</p>
  </div>
</div>

【讨论】：