如何在 3 列内水平对齐图片及其标题
Posted
技术标签:
【中文标题】如何在 3 列内水平对齐图片及其标题【英文标题】:How do I align a picture and its caption horizontally within 3 columns 【发布时间】:2016-12-18 20:53:22 【问题描述】:使用引导程序,我创建了三列,每列包含一个图像和一个标题。像这样:
但是,我希望它实际输出这样的内容:
这是我当前的代码:
<!-- Section 6 -->
<div class="cssSection cssCenter">
<div class="container">
<h2>The Order</h2>
<br>
<p class="cssInformation">Labelled as a religious order, the Knights Templars established a set of rules by which their members would follow.</p>
<br>
<div class="row">
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars swore to an oath of poverty, chastity, obedience and renounced the world.</p>
</div>
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars lived within their own community, which meant sleeping in a common dorm, while also eating their meals in union. Lorem ipsum sont dolor sit amet. Lorem ipsum sont dolor sit amet.Lorem ipsum sont dolor sit amet.</p>
</div>
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars refrained from becoming drunk, gambling and swearing</p>
</div>
</div>
</div>
</div>
这里是相关的 CSS 代码:
.cssSection
padding: 45px 0 30px;
.cssCenter
text-align: center;
.cssInformation
font-size: 18px;
我可以在 html 和/或 CSS 中进行哪些调整以使 p 标签水平对齐而不影响图像?
【问题讨论】:
尝试添加“display:flex; align-items:stretch;”到 .row 类。 @ThomasByy 谢谢你成功了 可能的指导:***.com/q/37442430/3597276 【参考方案1】:您的代码在 bootstrap3.3.4 中运行良好。 检查您的引导程序版本。
【讨论】:
【参考方案2】:在 plunker 中一切都很好。请提供您的整个 html 文件以帮助我们检查您的问题。
【讨论】:
【参考方案3】:您确定没有添加其他 CSS 吗?我在 jsfiddle 上尝试了你的代码(添加引导程序),它对我来说很好。
【讨论】:
以上是关于如何在 3 列内水平对齐图片及其标题的主要内容,如果未能解决你的问题,请参考以下文章