0

我想在一个 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;
}

谢谢！

4

3 回答 3

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;
}
于 2013-04-13T00:42:42.820 回答
0

对于div：

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

对于img：

margin: auto;
于 2013-04-12T23:22:27.760 回答
0

背景 

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

显示：表格单元格和垂直对齐：中间方法

您也可以使用垂直对齐：中间。

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/

于 2013-04-12T23:27:12.947 回答