Deka87 Deka87 - 6 months ago 10
HTML Question

Center columns content vertically with Bootstrap - table layout issue

I converted Bootstrap columns into table cells in order to easily align its content vertically:

<div class="container">
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col-xs-4">
<img src="..." class="img-responsive" alt="...">
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>

html, body, .container, .row, [class*="col-"] {
height: 100%;
}
.row {
display: table;
table-layout: fixed;
}
[class*="col-"] {
display: table-cell;
float: none;
}


https://jsfiddle.net/hm7p9vjw/2/

Everything works great in Chrome, however IE and FF won't keep the cells width equal to the col- values, it works as if the table-layout was set to auto (please try to open it with IE or FF to see what I mean).

Anything I am missing?

Answer

if you change the bootstrap css line 1134 and change max-width to width then the rendering in moz and chrome is the same and the image is nicely centered as in chrome.

the final code should look like this

.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
    display: block;
    width: 100%;
    height: auto;
}