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

使用引导程序我创建了三列，每列包含一个图片和一个标题。像这样：如何在3列内水平对齐图片及其标题

不过，我希望它实际输出这样的内容：

这是我当前的代码：

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

先进的感谢

来源

2016-08-11 Asem H

尝试并添加“display：flex; align-items：stretch;”到.row类。 –

@ThomasByy谢谢你的技巧 –

可能的指导：http://stackoverflow.com/q/37442430/3597276 –

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

来源

2016-08-12 00:05:03 Tashows

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

来源

2016-08-12 00:41:53

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

来源

2016-08-12 08:16:14

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

回答

相关问题