CODEWITHSUNDEEP
csstwitter-bootstrap
Kalyan Varma
Kalyan Varma

Reputation: 11

Aligning thumbnails along columns using twitter-bootstrap

I have been playing with twitter-bootstrap to create my photography page. I am using the default thumbnail class within li tags to create the border and align them. I have a whole bunch of thumbnails with images which are both horizontal and vertical.

The default settings really does not create a pretty layout of the thumbnails. By adding fixed height in the thumbnail's CSS, at least a neat grid gets formed now. However, within the thumbnail block, the images always align to the top. This leads to odd shaped grids when there is a vertical image in the stack.

I tried adding "vertical-align: middle;" within the thumbnail class, but does not seem to be working. I am pretty new to CSS, so kindly pardon me if I am missing something really obvious.

Upvotes: 1

Views: 1189

Answers (1)

coreyward
coreyward

Reputation: 80060

Unfortunately the Bootstrap thumbnails don't really normalize for a fixed height. If you want to make sure you have a clean grid, you need to crop your images to the same size. You could, alternately, use some CSS of your own to set the height of the li manually and set the img max-height to 100%, then use display: table-cell on the li so your vertical-align: middle will actually be effective at vertically centering the img.

Upvotes: 1

Related Questions