如何在div中创建图像中心？ [英] How to make a image center in a div?

问题描述

我的HTML代码如下所示：

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

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

但是IMG的尺寸可能会更大或者更小：200 * 50,50 * 200,50 * 50等。

如何让图片适合 div 的中心？图片的比例不应该改变。

====更新====
是的，我需要hori&垂直居中。

解决方案

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

  DIV.ctn {
 min-height：150px; 
最小宽度：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

My HTML code looks like this:

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

The ctn should be a fixed size, say, 150*150.

But the size of IMGs may bigger or smaller: 200*50, 50*200, 50*50 etc.

How do i make the image fit in the center of the div ? The image's proportion should not be changed.

====UPDATE==== Yes, I need both hori & vertical center.

解决方案

You could add css, to center the image both horizontally and vertically:

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>

Edit: for details see: http://www.w3.org/Style/Examples/007/center.html

这篇关于如何在div中创建图像中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！