为什么这些Bootstrap 3居中的文本列不是同等对齐的？

Question

我正在尝试将文本和图像的Bootstrap列布局为中心，但我对文本列有一个奇怪的问题。它们都集中在一起，但第2列总是下降：

我一直在解析所有关于在Bootstap 3中完全集中内容的SO问题，但我感到很沮丧。而且我不想使用Flex或Flexbox;我需要旧浏览器的向后兼容性。

Codepen：http://codepen.io/anon/pen/qqQWwb

<div class="row centered">

<div class="col-md-2 col-xs-5"><img class="img-responsive vcenter" src="http://i.imgur.com/1olmVpO.jpg" /></div>
<div class="col-md-2 col-xs-5"><img class="img-responsive vcenter" src="http://i.imgur.com/1olmVpO.jpg" /></div>
<div class="col-md-2 col-xs-5"><img class="img-responsive vcenter" src="http://i.imgur.com/1olmVpO.jpg" /></div>
<div class="col-md-2 col-xs-5"><img class="img-responsive vcenter" src="http://i.imgur.com/1olmVpO.jpg" /></div>

</div>


<div class="row centered">

<div class="col-md-4 col-xs-5">

<h2 class="headline">Column 1</h2>

<p>Nullam nulla risus, lobortis sollicitudin scelerisque quis, varius ac quam. Maecenas condimentum, erat nec dapibus luctus, velit nulla suscipit elit, ac vulputate nulla nulla in elit. Integer nisi purus, faucibus aliquam scelerisque ac, convallis semper ante. Maecenas et nunc eu mi fringilla mattis. Duis commodo, metus eget egestas scelerisque, velit orci malesuada magna, malesuada rhoncus nisi nisl non lorem. Vestibulum ullamcorper nisl at nunc molestie condimentum. Etiam elementum dignissim tincidunt. Donec feugiat tristique est non cursus. Phasellus consequat congue quam ac dictum.</p>
<p>Nullam nulla risus, lobortis sollicitudin scelerisque quis, varius ac quam. Maecenas condimentum, erat nec dapibus luctus, velit nulla suscipit elit, ac vulputate nulla nulla in elit. Integer nisi purus, faucibus aliquam scelerisque ac, convallis semper ante. Maecenas et nunc eu mi fringilla mattis. Duis commodo, metus eget egestas scelerisque, velit orci malesuada magna, malesuada rhoncus nisi nisl non lorem. Vestibulum ullamcorper nisl at nunc molestie condimentum. Etiam elementum dignissim tincidunt. Donec feugiat tristique est non cursus. Phasellus consequat congue quam ac dictum.</p>

</div>

<div class="col-md-4 col-xs-5">

<h2 class="headline">Column 2</h2>

<p>Nullam nulla risus, lobortis sollicitudin scelerisque quis, varius ac quam. Maecenas condimentum, erat nec dapibus luctus, velit nulla suscipit elit, ac vulputate nulla nulla in elit. Integer nisi purus, faucibus aliquam scelerisque ac, convallis semper ante. Maecenas et nunc eu mi fringilla mattis. Duis commodo, metus eget egestas scelerisque, velit orci malesuada magna, malesuada rhoncus nisi nisl non lorem. Vestibulum ullamcorper nisl at nunc molestie condimentum. Etiam elementum dignissim tincidunt. Donec feugiat tristique est non cursus. Phasellus consequat congue quam ac dictum.</p>

</div>

</div>

Answer 1

将vertical-align: top提交给col-md-4 col-xs-5 div（在我的情况下，我给它一个名为.col-structure的类），例如：

.col-structure {
  vertical-align: top;
}

查看下面的代码段（查看全屏）：

＆＃13;

＆＃13;

.col-structure {
  vertical-align: top;
}

.centered {
   text-align: center;
}

.centered img {padding:20px;}

.centered > div {
   float: none;
   display: inline-block;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

p {text-align: left;}

h2.headline {text-align: center;}

img {max-width:20%}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row centered">
    <div class="col-md-2 col-xs-5">
      <h2 class="headline">headline:</h2> </div>
  </div>
  <div class="row centered">
    <div class="col-md-2 col-xs-5"><img class="img-responsive vcenter" src="http://i.imgur.com/1olmVpO.jpg" /> </div>
    <div class="col-md-2 col-xs-5"><img class="img-responsive vcenter" src="http://i.imgur.com/1olmVpO.jpg" /> </div>
    <div class="col-md-2 col-xs-5"><img class="img-responsive vcenter" src="http://i.imgur.com/1olmVpO.jpg" /> </div>
    <div class="col-md-2 col-xs-5"><img class="img-responsive vcenter" src="http://i.imgur.com/1olmVpO.jpg" /> </div>
  </div>
  <div class="row centered">
    <div class="col-md-4 col-xs-5 col-structure">
      <h2 class="headline">Column 1</h2>
      <p>Nullam nulla risus, lobortis sollicitudin scelerisque quis, varius ac quam. Maecenas condimentum, erat nec dapibus luctus, velit nulla suscipit elit, ac vulputate nulla nulla in elit. Integer nisi purus, faucibus aliquam scelerisque ac, convallis semper ante. Maecenas et nunc eu mi fringilla mattis. Duis commodo, metus eget egestas scelerisque, velit orci malesuada magna, malesuada rhoncus nisi nisl non lorem. Vestibulum ullamcorper nisl at nunc molestie condimentum. Etiam elementum dignissim tincidunt. Donec feugiat tristique est non cursus. Phasellus consequat congue quam ac dictum.</p>
      <p>Nullam nulla risus, lobortis sollicitudin scelerisque quis, varius ac quam. Maecenas condimentum, erat nec dapibus luctus, velit nulla suscipit elit, ac vulputate nulla nulla in elit. Integer nisi purus, faucibus aliquam scelerisque ac, convallis semper ante. Maecenas et nunc eu mi fringilla mattis. Duis commodo, metus eget egestas scelerisque, velit orci malesuada magna, malesuada rhoncus nisi nisl non lorem. Vestibulum ullamcorper nisl at nunc molestie condimentum. Etiam elementum dignissim tincidunt. Donec feugiat tristique est non cursus. Phasellus consequat congue quam ac dictum.</p>
    </div>
    <div class="col-md-4 col-xs-5 col-structure">
      <h2 class="headline">Column 2</h2>
      <p>Nullam nulla risus, lobortis sollicitudin scelerisque quis, varius ac quam. Maecenas condimentum, erat nec dapibus luctus, velit nulla suscipit elit, ac vulputate nulla nulla in elit. Integer nisi purus, faucibus aliquam scelerisque ac, convallis semper ante. Maecenas et nunc eu mi fringilla mattis. Duis commodo, metus eget egestas scelerisque, velit orci malesuada magna, malesuada rhoncus nisi nisl non lorem. Vestibulum ullamcorper nisl at nunc molestie condimentum. Etiam elementum dignissim tincidunt. Donec feugiat tristique est non cursus. Phasellus consequat congue quam ac dictum.</p>
    </div>
  </div>
  <div class="row centered">
    <div class="col-md-2 col-xs-5"><img class="img-responsive vcenter" src="http://i.imgur.com/1olmVpO.jpg" /> </div>
    <div class="col-md-2 col-xs-5"><img class="img-responsive vcenter" src="http://i.imgur.com/1olmVpO.jpg" /> </div>
    <div class="col-md-2 col-xs-5"><img class="img-responsive vcenter" src="http://i.imgur.com/1olmVpO.jpg" /> </div>
    <div class="col-md-2 col-xs-5"><img class="img-responsive vcenter" src="http://i.imgur.com/1olmVpO.jpg" /> </div>
  </div>
  <div class="row centered">
    <div class="col-md-2 col-xs-5">
      <h2 class="headline">headline:</h2> </div>
  </div>
  <div class="row centered">
    <div class="col-md-4 col-xs-5 col-structure">
      <h2 class="headline">Column 1</h2>
      <p>Nullam nulla risus, lobortis sollicitudin scelerisque quis, varius ac quam. Maecenas condimentum, erat nec dapibus luctus, velit nulla suscipit elit, ac vulputate nulla nulla in elit. Integer nisi purus, faucibus aliquam scelerisque ac, conva llis semper ante. Maecenas et nunc eu mi fringilla mattis. Duis commodo, metus eget egestas scelerisque, velit orci malesuada magna, malesuada rhoncus nisi nisl non lorem. Vestibulum ullamcorper nisl at nunc molestie condimentum. Etiam elementum dignissim tincidunt. Donec feugiat tristique est non cursus. Phasellus consequat congue quam ac dictum.</p>
      <p>Nullam nulla risus, lobortis sollicitudin scelerisque quis, varius ac quam. Maecenas condimentum, erat nec dapibus luctus, velit nulla suscipit elit, ac vulputate nulla nulla in elit. Integer nisi purus, faucibus aliquam scelerisque ac, convallis semper ante. Maecenas et nunc eu mi fringilla mattis. Duis commodo, metus eget egestas scelerisque, velit orci malesuada magna, malesuada rhoncus nisi nisl non lorem. Vestibulum ullamcorper nisl at nunc molestie condimentum. Etiam elementum dignissim tincidunt. Donec feugiat tristique est non cursus. Phasellus consequat congue quam ac dictum.</p>
    </div>
    <div class="col-md-4 col-xs-5 col-structure">
      <h2 class="headline">Column 2</h2>
      <p>Nullam nulla risus, lobortis sollicitudin scelerisque quis, varius ac quam. Maecenas condimentum, erat nec dapibus luctus, velit nulla suscipit elit, ac vulputate nulla nulla in elit. Integer nisi purus, faucibus aliquam scelerisque ac, convallis semper ante. Maecenas et nunc eu mi fringilla mattis. Duis commodo, metus eget egestas scelerisque, velit orci malesuada magna, malesuada rhoncus nisi nisl non lorem. Vestibulum ullamcorper nisl at nunc molestie condimentum. Etiam elementum dignissim tincidunt. Donec feugiat tristique est non cursus. Phasellus consequat congue quam ac dictum.</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！