Home/ Questions/Q 8057993
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T09:12:46+00:00

I started to use the bootstrap CSS framework. There are classes to build an

  • 0

I started to use the bootstrap CSS framework. There are classes to build an image gallery which basically draws a frame around the picture and consists of a listitem, an anchor and the image. The gallery does not look to good if the images are of different size. My idea was to set a fixed width and height for each thumbnail and center the image ind the border. That somewhow does not work. The tumbnail is always attached to the top of the frame.

<ul class="thumbnails" id="ulthumbs">
<li>
    <a class="thumbnail" style="width:120px; height:120px; line-height:120px;" >
        <img src="http://placehold.it/350x150" style="width:120px; height:84px; vertical-align:middle">
    </a>
</li>
</ul>

Ideas?

Best,
Bernhard

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Other than using a table, there is not a cross browser way to vertically align items of an unknown height without Javascript.

    jQuery Vertical Align Plugin

    In your case you would give the list items a fixed height and use the plugin to align the anchors (which will need to be set as block level elements).

    • 0