在固定大小的容器元素中居中放置图像（CSS，HTML） [英] Center image in container element with fixed size (CSS, HTML)

问题描述

我想在从数据库加载的.net页面上显示图像（因此数量可能会有所不同）。所有图像分别具有不同的宽度和高度，分别高达130px和60px。我想把图像放入容器元素，固定宽度为130px，固定高度为60px。图像应该垂直和水平居中。

如果可能的话，容器元素应水平排列。


我试过 div （带浮动）和 span 。使用div，我可以获得固定的尺寸，但不能将图像居中。有了跨度，我可以居中，但不能设置任何大小。如果我把span放入div，它似乎表现得像div（居中被忽略）。

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).

推荐答案

您可以在上看到它的工作原理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;        
    }

这篇关于在固定大小的容器元素中居中放置图像（CSS，HTML）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！