我有 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;
}
有什么办法解决这个问题吗?
最佳答案
使用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>
关于html - 如何让文字停留在图片下方(响应式设计),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46869220/