Html 如何在div的中心显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7123599/
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
How to display image in the center of a div
提问by Joper
I have div with ajax-loader gif image
我有带有 ajax-loader gif 图像的 div
<div id="mydiv" style="height: 400px; text-align: center;">
<img src="/Content/ajax-loader.gif" class="ajax-loader"/>
</div>
.ajax-loader
{
/*hidden from IE 5-6 */
margin-top: 0; /* to clean up, just in case IE later supports valign! */
vertical-align: middle;
margin-top: expression(( 150 - this.height ) / 2);
}
But could not get it displayed in the center (both vertically and horizontally). Need help with that.
但无法让它显示在中心（垂直和水平）。需要帮助。
回答by Salman A
The following assumes that the width and height of the image is known:
下面假设图像的宽度和高度是已知的：
#mydiv {
height: 400px;
position: relative;
background-color: gray; /* for demonstration */
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
}<div id="mydiv">
<img src="http://dummyimage.com/64x64/000/fff.gif&text=LOADING" class="ajax-loader">
</div>UPDATE: in modern browsers margin: autowill produce the desired result withing knowing the width/height of the image:
更新：在现代浏览器中，margin: auto知道图像的宽度/高度会产生所需的结果：
#mydiv {
height: 400px;
position: relative;
background-color: gray; /* for demonstration */
}
.ajax-loader {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* presto! */
}<div id="mydiv">
<img src="http://dummyimage.com/64x64/000/fff.gif&text=LOADING" class="ajax-loader">
</div>回答by bulltorious
Full screen ajax loader, with some opacity.
全屏ajax加载器，有一些不透明度。
using
使用
$('#mydiv').show();
$('#mydiv').hide();
to toggle it.
切换它。
#mydiv {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background-color:grey;
opacity: .8;
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
<div id="mydiv">
<img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>
回答by DaveMorganTexas
Place this div just inside the area you are updating:
将此 div 放在您要更新的区域内：
<div id="myLoader" class="ajax-loader"></div>
And add this to your css:
并将其添加到您的 css 中：
.ajax-loader {
cursor: wait;
background:#ffffff url('ajax-loader.gif') no-repeat center center;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: alpha(opacity=75);
opacity: 0.75;
position: absolute;
z-index: 10000;
display: none;
}
When you want to display it, just call:
当你想显示它时，只需调用：
$('#myLoader').css({
height: $('#myLoader').parent().height(),
width: $('#myLoader').parent().width()
});
$('#myLoader').show();
or some equivalent.
或一些等价物。
回答by web-tiki
Other approach to center horizontaly and verticaly an image inside a div:
在 div 中水平和垂直居中图像的其他方法：
- unknown image size
- unkown div size
- responsive
- 未知图像大小
- 未知的 div 大小
- 反应灵敏
HTML :
HTML :
<div>
<img src="http://lorempixel.com/output/people-q-g-50-50-1.jpg" alt="" />
</div>
CSS :
CSS :
div{
position:relative;
}
img{
position:absolute;
top:0; bottom:0;
left:0; right:0;
margin:auto;
}
回答by nishant
Use:
用：
display:inline-block;
Or:
或者：
display:block;
And:
和：
text-align:Center;
Inside the CSS file... Then it will appear
在CSS文件里面...然后它会出现
回答by Seeker
You can do it with attribute align
你可以用属性 align 做到这一点
<div id="mydiv" align="center">
<img src="/Content/ajax-loader.gif" class="ajax-loader"/>
</div>
回答by Dieter Gribnitz
Dave morgan's solution worked for me.
戴夫摩根的解决方案对我有用。
Here is a bit cleaner version of it.
这是它的一个更干净的版本。
The problem with all the solutions above is that you need to create some image or div in your container before hand. That is a waste of resources and makes it hard to apply to specific targets. Let jquery generate the div instead.
上述所有解决方案的问题在于，您需要事先在容器中创建一些图像或 div。这是一种资源浪费，并且很难应用于特定目标。让 jquery 生成 div。
Here is my code:
这是我的代码：
js
js
$('#trigger').on('click', function(){
var target = $('#stage');
var el = $('<div class="spinner" />').width(target.width()).height(target.height());
target.prepend(el);
});
css
css
.spinner{
position: absolute;
cursor: wait;
z-index: 10000;
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
background: url('../img/system/ajax.gif') no-repeat center #f8f8f8;
}
