如何在3列内水平对齐图片及其标题

Question

使用bootstrap我创建了三列，每列包含一个图像和一个标题。像这样：

但是，我希望它实际输出这样的内容：

这是我目前的代码：

<!-- 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标签水平对齐，而不会影响图像？

先谢谢

Answer 1

您确定没有其他可能已添加的CSS吗？我在jsfiddle上尝试了你的代码（添加了bootstrap），它对我来说很好。

Answer 2

这里的一切都很好。请提供您的整个html文件，以帮助我们检查您的问题。

Answer 3

您的代码在bootstrap3.3.4中运行良好。 检查你的bootstrap版本。