Question

我有div固定高度＆amp;宽度。在div中有未知高度＆amp;宽度。如何使图像居中。

我希望输出类似于http://i.stack.imgur.com/8x9qH.gif

Answer 1

一种选择是使用CSS。你可以内联样式（如果你从DB输出有时这是最好的方式）。或者将它分配给一个班级。无论哪种方式：

background:url(http://i.stack.imgur.com/TW66h.png) 50% 50% no-repeat;

http://jsfiddle.net/VTgWg/1/

以下是展示不同尺寸图片的演示：http://jsfiddle.net/r2wm2/1/

我见过这样的情况你要链接图像。以下是为<a>代码交换div的示例：http://jsfiddle.net/zSuzm/1/

Answer 2

#center {
    display:table-cell; 
    width:400px; 
    height:400px; 
    border:1px solid #444; 
    margin:auto;
    vertical-align:middle; 
    text-align:center}

这会将您的div设置为像表格单元格一样，它对居中有很好的支持。您不需要任何CSS图像。

Answer 3

这个css适合你的例子：

#center {width:400px; height:400px; border:1px solid #444; margin:auto; display: table-cell; vertical-align: middle;}
#center img { margin:auto; display:block;}

Answer 4

您需要更新#center img部分：

#center img {
    position: relative;
    left: 148px;
    top: 148px;
}

容器的中心为200px。通过52px偏移图像会使图像的中心位于容器的中心。

如何使用css将文本或图像置于固定大小的div上

4 个答案: