html - 如何让文字停留在图片下方(响应式设计)

Question

我有 3 个原始图像(使用 Bootstrap)。每张图片下面应该有一个标题、一个链接和一段文字。所有三个元素都应该在图像下方居中。随着屏幕变小，图像一个接一个地排列，这三个元素必须在图像下方居中。我设法用一个标题和一个链接来做到这一点，它按需要工作:

<div class="col-md-4">
 <figure>
  <img class="img-responsive" src="..." alt="ProjectName">
   <figcaption>
    <h3 class="text-uppercase">Project Name</h3>
    <p><a href="http://...">Link to project</a></p>
   </figcaption>
 </figure>
</div>

但是当我添加一段这样的文字时

<div class="col-md-4">
 <figure>
  <img class="img-responsive" src="..." alt="ProjectName">
   <figcaption>
    <h3 class="text-uppercase">Project Name</h3>
    <p><a href="http://...">Link to project</a></p>
    <p>Some text</p>
   </figcaption>
 </figure>
</div>

随着屏幕变小，所有三个元素(标题、链接和文本)都不会停留在图像下方。相反，它们在屏幕中央对齐。

这是我的 CSS 样式:

figure {
    display: inline-block;
}

figure figcaption {
    text-align: center;
}

有什么办法解决这个问题吗？

Answer 1

使用text-center实用程序 Bootstrap 类，然后使用 media query 到 text-align:left

@media (max-width:640px) {
  .text-center {
    text-align: left !important/* important only for demo*/
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4">
  <figure>
    <img class="img-responsive" src="//placehold.it/600" alt="ProjectName">
    <figcaption class="text-center">
      <h3 class="text-uppercase">Project Name</h3>
      <p><a href="http://...">Link to project</a></p>
      <p>Some text</p>
    </figcaption>
  </figure>
</div>