Html 如何在div中制作图像中心?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16818192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:53:42  来源:igfitidea点击:

How to make a image center in a div?

csshtml

提问by WoooHaaaa

My HTML code looks like this:

我的 HTML 代码如下所示:

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

The ctnshould be a fixed size, say, 150*150.

ctn应该是一个固定大小的,比方说,150 * 150。

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

但是IMG的尺寸可能更大也可能更小:200*50、50*200、50*50等。

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

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

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

====更新==== 是的,我需要水平和垂直中心。

回答by noamik

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

您可以添加 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>

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

编辑:详情见:http: //www.w3.org/Style/Examples/007/center.html

回答by Andy

Try the following:

请尝试以下操作:

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

DEMO

演示

回答by Sharky

i think this is your answer

我想这是你的答案

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

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

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

it fits, in the centerof your fixed size div, and image proportions are notchanged.

适合,在您的固定大小 div中心,并且图像比例不会改变。

回答by n00dle

EDIT: re-reading, you want the image size to be fixed.

编辑:重新阅读,您希望图像大小是固定的。

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

回答by Alexandre Lavoie

The easiest way should be :

最简单的方法应该是:

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

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

</div>

回答by zurfyx

If the ctnhas to be a fixed sized (ex: 150x150) and the image has to be proporcional and not bigger than that div, this is a solution:

如果ctn必须是固定大小(例如:150x150)并且图像必须是比例的并且不大于该 div,则这是一个解决方案:

CSS

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

HTML

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

This way will center the div in the middle of the screen and the image will not be bigger than 150x150 but it will mantain its proporcionality.

这种方式将使 div 居中在屏幕中间,图像不会大于 150x150,但它会保持其比例性。

回答by Surafel Asrat

Give id to your like then in your css →

然后在你的 css 中给你喜欢的 id →

#foto{
    margin-left:180px;
}

回答by rajansoft1

set style="margin-let:auto; margin:right:auto"

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

also specify width to the image else it will not work

还要为图像指定宽度,否则它将不起作用