Question

我的HTML代码如下所示：

<div class="ctn">
    <img src="some-img.jpg"/>
</div>

ctn应该是固定大小，例如150 * 150。

但IMG的大小可能更大或更小：200 * 50,50 * 200,50 * 50等。

如何使图像适合div的中心？不应更改图像的比例。

==== UPDATE ==== 是的，我需要两个hori＆amp;垂直中心。

Answer 1

您可以添加css，使图像水平和垂直居中：

DIV.ctn {
    min-height: 150px;
    min-width: 150px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: table-cell;
    vertical-align: middle }

...

<div class="ctn">
    <img src="some-img.jpg"/>
</div>

修改：有关详细信息，请参阅：http://www.w3.org/Style/Examples/007/center.html

Answer 2

尝试以下方法：

text-align: center;    
display: table-cell;
vertical-align: middle;

DEMO

Answer 3

编辑：重新阅读，您希望修复图像大小。

div.cnt {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    min-height: 150px;
    min-width: 150px;
}

Answer 4

我认为这是你的答案

.container img { width: 100%;}
.container {display: table-cell;vertical-align: middle}

http://jsfiddle.net/RUQAM/1/

适合，固定大小div 的中心，图片比例不更改。

Answer 5

最简单的方法应该是：

div.cnt {
    width: 150px;
    height: 150px;
}

<div class="ctn" style="background: url('some-img.jpg') 50% 50% no-repeat;">

</div>

Answer 6

如果ctn必须是固定大小（例如：150x150）并且图像必须是proporcional而不是大于div，这是一个解决方案：

<强> CSS

.ctn{
    background-color:#F00;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    overflow:hidden;
    height:150px;
    width:150px;
}
.ctn div{
    display:table-cell;
    vertical-align: middle;
    text-align:center;
}
.ctn div img{
    width:150px;
}

<强> HTML

<div class="ctn">
<div>
    <img src="url" />
</div>
</div>

这种方式会将div置于屏幕中间，图像不会大于150x150，但它会保留它的proporcionality。

Answer 7

根据您的喜好给ID 然后在您的CSS中→

#foto{
    margin-left:180px;
}

Answer 8

set style =“margin-let：auto; margin：right：auto”

还指定图像的宽度，否则它将不起作用

如何在div中制作图像中心？

8 个答案: