Html 将图像在div内的中心和中间对齐
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4888223/
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
Align image in center and middle within div
提问by Dro1n2
I have following div
我有以下 div
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png">
</div>
How to align the image so as to be located in the middle and center of div ?
如何对齐图像以位于 div 的中间和中心?
回答by Gurpreet Singh
回答by John K.
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>
回答by aerdman
This can also be done using the Flexbox layout:
这也可以使用 Flexbox 布局来完成:
STATIC SIZE
静态尺寸
.parent {
display: flex;
height: 300px; /* Or whatever */
background-color: #000;
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
<div class="parent">
<img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>
DYNAMIC SIZE
动态尺寸
html, body {
width: 100%;
height: 100%;
display: flex;
background-color: #999;
}
* {
margin: 0;
padding: 0;
}
.parent {
margin: auto;
background-color: #000;
display: flex;
height: 80%;
width: 80%;
}
.child {
margin: auto; /* Magic! */
max-width: 100%;
max-height: 100%;
}
<div class="parent">
<img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>
I found the example in this article, which does a great job explaining the how to use layout.
我在这篇文章中找到了这个例子,它很好地解释了如何使用布局。
回答by avrahamcool
Seems to me that you also wanted that image to be vertically centered within the container. (I didn't see any answer that provided that)
在我看来,您还希望该图像在容器内垂直居中。(我没有看到任何提供的答案)
- Pure CSS solution
- Not breaking the document flow (no floats or absolute positioning)
- Cross browser compatibility (even IE6)
- Completely responsive.
- 纯 CSS 解决方案
- 不破坏文档流(无浮动或绝对定位)
- 跨浏览器兼容性(甚至 IE6)
- 完全响应。
HTML
HTML
<div id="over">
<span class="Centerer"></span>
<img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>
CSS
CSS
*
{
padding: 0;
margin: 0;
}
#over
{
position:absolute;
width:100%;
height:100%;
text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
Note:this solution is good to align any element within any element.
for IE7, when applying the .Centered
class on block elements, you will have to use another trick to get the inline-block
working. (that because IE6/IE7 dont play well with inline-block on block elements)
注意:此解决方案适用于对齐任何元素内的任何元素。对于 IE7,.Centered
在块元素上应用类时,您将不得不使用另一个技巧来获得inline-block
工作。(因为 IE6/IE7 不能很好地与块元素上的内联块配合使用)
回答by Nitin
img.centered {
display: block;
margin: auto auto;
}
回答by tanveer ahmad dar
You can do this easily by using display:flex css property
您可以使用 display:flex css 属性轻松完成此操作
#over {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
回答by dhir
#over {position:relative; text-align:center;
width:100%; height:100%; background:#CCC;}
#over img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
回答by pawel7318
I still had some issues with other solution presented here. Finally this worked best for me:
我仍然对这里介绍的其他解决方案有一些问题。最后这对我来说最有效:
<div class="parent">
<img class="child" src="image.png"/>
</div>
css3:
css3:
.child {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-o-transform: translate(-50%, -50%); /* Opera */
// I suppose you may like those too:
// max-width: 80%;
// max-height: 80%;
}
You can read more about that approach at this page.
您可以在此页面阅读有关该方法的更多信息。
回答by Garconis
Basically, setting right and left margin to auto will cause the image to center align.
基本上,将左右边距设置为 auto 会导致图像居中对齐。
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>
回答by Sujay sreedhar
This would be a simpler approach
这将是一种更简单的方法
#over > img{
display: block;
margin:0 auto;
}