如何使一个图片在div中居中显示？

Question

我的HTML代码如下所示：

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

ctn 应该是一个固定大小，比如 150*150。

但是图片的大小可能会更大或更小：200*50、50*200、50*50 等。

我如何使图片适合 div 的中心位置？图片的比例不应改变。

====更新==== 是的，我需要水平和垂直居中。

- WoooHaaaa

---

横向的、纵向的还是两者都要？ - dsgriffin

@Zenith，是的，那样会更好。 - WoooHaaaa

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。

- noamik

---

很酷，当我删除了"display: table-cell"属性时，它对我起作用了。 - Shivanshu

Answer 2

尝试以下操作：

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

DEMO

- Andy

---

仅水平居中 - noamik

Answer 3

我想这就是你的答案。

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

以上代码可在此链接中查看：http://jsfiddle.net/RUQAM/1/

- Sharky

Answer 4

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

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

- n00dle

Answer 5

最简单的方法应该是：

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

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

</div>

- Alexandre Lavoie

Answer 6

如果ctn必须是固定大小（例如：150x150），并且图像必须是比例的，不能大于该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的尺寸，同时保持其比例。

- zurfyx

Answer 7

在编程中，给你的标签一个id， 然后在你的CSS中使用 →

#foto{
    margin-left:180px;
}

- Surafel Asrat

Answer 8

设置样式="margin-let:auto; margin:right:auto"

同时指定图像的宽度，否则它将无法工作

- rajansoft1