如何让文字停留在图片下方（响应式设计）答案

【问题标题】：How to make text stay under an image (responsive design)如何让文字停留在图片下方（响应式设计）
【发布时间】：2017-10-22 08:03:43
【问题描述】：

我有 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;
}

任何想法如何解决这个问题？

【问题讨论】：

你在使用引导程序吗？
你能提供一个jsfiddle吗？

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用text-center 实用程序引导类，然后使用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>

【讨论】：

谢谢@dippas！正是我想要的

【解决方案2】：

如果你使用的是引导程序，那么就这样做

if you are using bootstrap then try like this

  <div class = "row">
  <div class = "col-md-4">
  <div class = "thumbnail">
     <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder 
      thumbnail">
  </div> 
  <div class = "caption">
     <h3>Thumbnail label</h3>
     <p>Some sample text. Some sample text.</p>  
  </div>
 </div>
</div>

【讨论】：