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

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

如果您使用的引导再做这样

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>