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

Answer 2

如果你正在使用bootstrap，那就这样做

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>

如何使文字留在图像下（响应式设计）

2 个答案: