Question

我希望将图像居中，可以是各种尺寸，垂直和水平都是div。所有图像都适合div，但是它们的大小不同。

我该怎么做？

CSS：

.item-image-box {
    width: 48px;
    height: 48px;
    background-color: black;
    border-style: solid;
    border-color: #382418;
    border-width: 2px;
    border-right: 0;
    position: relative;
    float: left;
}

谢谢！

Answer 1

只需使用背景定位和内联样式的功能。

JSfiddle：http://jsfiddle.net/F6PBJ/

HTML

<div style="background-image:url(http://placekitten.com/90/40)"></div>
<div style="background-image:url(http://placekitten.com/40/40)"></div>
<div style="background-image:url(http://placekitten.com/40/90)"></div>
<div style="background-image:url(http://placekitten.com/60/80)"></div>

CSS

div {
    width: 100px;
    height: 100px;
    background-color: black;
    background-position:center;
    background-repeat:no-repeat;
    border-style: solid;
    border-color: #382418;
    border-width: 2px;
    border-right: 0;
    float: left;
}

Answer 2

对于div：

text-align: center;
line-height: /*height of your div*/

对于img：

margin: auto;

Answer 3

背景

div {
       background: url(/path/to/img.png) no-repeat center center;
    }

display：table-cell和vertical-align：middle method

你也可以使用vertical-align：middle。

div {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

http://jsfiddle.net/alexdickson/Vt5ed/

取自CSS技巧：

http://css-tricks.com/centering-in-the-unknown/

http://jsfiddle.net/chriscoyier/hJtpF/

div中垂直和水平居中的图像

3 个答案:

HTML

CSS