Vertically align twitter bootstrap thumbnails?

Question

Update: Plnkr available here to demonstrate: http://plnkr.co/edit/i6ngfaMgSE0XGZq3VuBW?p=preview (although you need to widen the "preview" window so that the responsive stuff doesn't kick in.

So I'm trying to use Twitter Bootstrap's thumbnails and thumbnail classes to produce an image-gallery type effect, however I'm having trouble trying to get the images to all align properly.

All the thumbnails being retrieved from the server are scaled uniformly so that they fit in a 200px X 200px image. However, sometimes they are much wider than tall (200px X 100px) and vice-versa (100px X 200px). What I want is to have all my images vertically and horizontally centred within the row they are on. So for example in this:

enter image description here

I'd like testImage, testImage2 and testImage3 to be moved down in their containers so that the tags all lined up.

Here's the HTML (with some AngularJS bindings):

<div class="container" ng-controller="StaticDataManagementCtrl">
  <div class="row">
    <div class="span12">
      <tabset>
        <tab heading="Text" select="loadTextLibrary()">
          <div class="row"></div>
        </tab>
        <tab heading="Images" select="loadImageLibrary()">
          <div class="row-fluid">
            <ul class="thumbnails">
              <li class="span3" ng-repeat="image in staticImages">
                <div class="thumbnail">
                  <img ng-src="/api/static/images/{{image._id}}/thumb">
                  <h3>{{image.name}}</h3>
                  <p>Some sample description</p>
                </div>
              </li>
            </ul>
          </div>
        </tab>
        <tab heading="Health Mark" select="loadHealthMarkLibrary()"></tab>
      </tabset>
    </div>
  </div>
</div>

Possible Duplicate: http://stackoverflow.com/questions/7273338/how-to-properly-align-an-image-vertically — Girisha C, Jul 08 '13 at 14:41

score 1 · Answer 1 · answered Jul 08 '13 at 14:38

1

Try to do with following css:

.thumbnail{
    vertical-align: middle !important;
}

answered Jul 08 '13 at 14:38

Dhaval Bharadva

3,053
2
24
35

Is the `!important` necessary here? – Cattsan Jul 08 '13 at 14:49
1

No but if you give !important then it override other css and make this css as important. – Dhaval Bharadva Jul 08 '13 at 15:09
I've already tried this to no avail. I'll try to setup a Plunkr to demonstrate, for easier editing / testing. – Siyfion Jul 09 '13 at 11:28
Okay, added the Plnkr to demonstrate. – Siyfion Jul 09 '13 at 11:36

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

This answer should help. Basically you have to fix the height of the text and images. Bootstrap has an .img-responsive that will help with scaling, and don't forget overflow:hidden.

edited May 23 '17 at 10:32

Community

1
1

answered Dec 16 '13 at 15:24

RobinGower

928
6
14

Vertically align twitter bootstrap thumbnails?

2 Answers2