Question

I want to display images on a .net page which I load from database (the amount can thus vary). All images have different widths and heights up to 130px and 60px respectively. I want to put the images into container elements with a fixed width of 130px and a fixed height of 60px. The images should be centered vertically and horizontally. The container elements should be aligned horizontally if possible.

I tried div (with float) and span. With div, I get the fixed sizes, but cannot center the images. With span, I can center, but not set any size. If I put span into div, it seems to behave like div (centering is ignored).

Answer 1

You can see it work on http://jsfiddle.net/km5dk/8/

But I think you search something like this.

### HTML ###


    <div id="container">
        <div class="image-container">
            <img src="#" alt="A image" />
        </div>
    </div>​


    ### CSS ###

    #container {
        width: 130px;
        height: 60px;
        display: table;
        background-color: #ccc;         
    }

    #container .image-container {
        text-align: center;
        vertical-align: middle;
        display: table-cell;
    }

    #container .image-container img {
        max-width: 160px;
        max-height: 60px;        
    }