Vertical align in bootstrap without breaking the grid

Question

I know there've been a dozen questions to this problem already but none seems to fit my situation. Since using tables for layouting purposes is no good style, I've tried a different although similar aproach, which seems to be a common way of vertically aligning content inside a div. I'm using a standard bootstrap grid with a row and columns inside.

<div class="row" style="height: 100px";>
    <div class="col-lg-1 valign">
        <img />
    </div>
    <div class="col-lg-6 valign">
        <span />
    </div>
    <div class="col-lg-5 valign">
        <span />
    </div>
</div>

My css looks like this:

.valign
{
    display: table;
    height: 100%;
}

.valign > img, .valign > span
{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

I've seen this been used a lot of times, and I have used it a few times myself, but in bootstrap it breaks the bootstrap grid. The last column 'falls out of the row'. I've tried adding table-layout: fixed to the elements (span and img in this case) as suggested in another thread.

I've also tried the same thing with twelve divs and the class col-lg-1 with the same result. The last column doesn't seem to fit in the row anymore and it looks like a line break is being created.

Any Ideas?

Cheers, Beejay

You may want to consider **[this](http://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap/22196760#22196760)** or **[this](http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474)** solutions; Which are the same :) anyway! — Hashem Qolami, Aug 01 '14 at 11:45
Is your problem that nothing is aligned in a horizontal row? If so, just change `display: table` to `display: inline-table` — pattmorter, Aug 01 '14 at 11:46
@Hbirjand: I'm trying to sadly, jsfiddle won't accept bootstrap classes at the moment.. — Beejay, Aug 01 '14 at 11:53
@pattmorter: Too bad, I was hoping it'll be so easy, but the same outcome. Thanks though — Beejay, Aug 01 '14 at 11:54
@HashemQolami: I'll give them a try altough it might take a while to implement — Beejay, Aug 01 '14 at 11:55
@Beejay, Everything was vertically aligning for me when i changed `display: inline-table` and removed the `height: 100px`. However, my sense of vertically aligned could be different from that of which you are asking. — pattmorter, Aug 01 '14 at 11:57
@Beejay,May be this tool will do the trick http://www.bootply.com/ — Hbirjand, Aug 01 '14 at 11:58
@pattmorter: IMHO aligning vertically means, aligning an element in the middle between top and bottom of the parent element. I would say that's the definition most people use for vertical aligning ;) — Beejay, Aug 01 '14 at 12:07
@Hbirjand: Bootply is pretty awesome! [http://www.bootply.com/esbANP4voK] altough I was not able to reproduce the error I'm getting. But to understand the sitation better: the gray div breaks down under the green one — Beejay, Aug 01 '14 at 12:09
@HashemQolami: That indeed did the trick! Thank you very much. If you post your comment as an answer, I'll accept it! — Beejay, Aug 01 '14 at 12:20
@Beejay I'm glad that it helped. Honestly I don't feel writing an answer right now :/ But if you found those answers helpful, it would be nice if you gave them an upvote :) — Hashem Qolami, Aug 01 '14 at 14:23

Vertical align in bootstrap without breaking the grid

0 Answers0