如何在div的中心显示图像
我有一个Ajax的装载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); }
但无法显示在中心（垂直和水平）。 需要帮助。
以下假定图像的宽度和高度是已知的：
#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>
全屏阿贾克斯装载机，一些不透明的。
运用
$('#mydiv').show(); $('#mydiv').hide();
切换它。
#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/jQueryhttp://img.dovov.comajax-loader.gif" class="ajax-loader"/> </div>
将这个div放在你正在更新的区域内：
<div id="myLoader" class="ajax-loader"></div>
并添加到您的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; }
当你想显示它时，只需调用：
$('#myLoader').css({ height: $('#myLoader').parent().height(), width: $('#myLoader').parent().width() }); $('#myLoader').show();
或者一些等同物。
其他的方法来中心horizontaly和verticaly在一个div里面的图像：
- 未知的图像大小
- 未知的div大小
- 响应
DEMO
HTML：
<div> <img src="http://lorempixel.com/output/people-qg-50-50-1.jpg" alt="" /> </div>
CSS：
div{ position:relative; } img{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
使用：
display:inline-block;
要么：
display:block;
和：
text-align:Center;
里面的CSS文件…然后它会出现
你可以用属性align来做到这一点
<div id="mydiv" align="center"> <img src="/Content/ajax-loader.gif" class="ajax-loader"/> </div>
戴夫摩根的解决scheme为我工作。
这是一个更清洁的版本。
上述所有解决scheme的问题是，你需要在你的容器之前创build一些图像或div。 这是浪费资源，很难适用于具体的目标。 让jquery代替生成div。
这是我的代码：
JS
$('#trigger').on('click', function(){ var target = $('#stage'); var el = $('<div class="spinner" />').width(target.width()).height(target.height()); target.prepend(el); });
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; }
