CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvertical-alignment
md1hunox
md1hunox

Reputation: 3955

vertically aligning images to the bottom inside a bootstrap "row"?

In the following example : http://jsfiddle.net/Fvswp/3/

I have 3 images inside a row, i want to align the images to the bottom of the row.

I tried other methods like making the outer division position relative and that of the image absolute and then bottom: 0 but it doesn't work since I'm using bootstrap (2.3.1).

I know that there are many other similar questions like mine viz this but none of the solutions work with mine.

How do I vertically align these images to the bottom of the row?

Thanks

Upvotes: 3

Views: 7118

Answers (2)

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23873

Make columns equal height (equal to the height of the largest image) and position images inside columns at the bottom: 

#header > div {
    height: 128px;
    position: relative;
}
#header > div > img {
    position: absolute;
    bottom: 0;
}

Demo: http://jsfiddle.net/Fvswp/6/

Upvotes: -1

Mitchell Layzell
Mitchell Layzell

Reputation: 3058

I've updated your jsFiddle http://jsfiddle.net/Fvswp/5/ what you need to do is add a css property display: block; to your img element like so

CSS

img { display: block;}

This will remove that bottom space, its kind of a default line of code you should use in all your projects that fix's this issue.

PS: Thanks for posting a fiddle

Upvotes: 7

Related Questions