Why are these Bootstrap 3 centered text columns not equally top aligned? - html

Question

I'm trying to get a layout of Bootstrap columns of text and images to be centered, but I have a strange issue with text columns. They are all centered, but column 2 always drops down:
I've been parsing all the SO questions about fully centering content in Bootstap 3, but am flummoxed. And I don't want to use Flex or Flexbox; I need the backward compatibility for old browsers.
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

Give vertical-align: top to col-md-4 col-xs-5 div (in my case I've given it a class named .col-structure), like:
.col-structure {
vertical-align: top;
}
Have a look at the snippet below (view full screen):
.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%}
<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>
Hope this helps!