我曾與阿賈克斯裝載機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);
}
DIV的中心顯示圖像，但不能把它顯示在中央（垂直和水平方向）。需要幫助。
以下假定的圖像的寬度和高度是已知的：
#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：在現代瀏覽器margin: auto會產生期望的結果withing知道寬度/高度的形象：
#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>你可以用屬性做到一致
<div id="mydiv" align="center">
<img src="/Content/ajax-loader.gif" 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/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>
'＃mydiv'中的位置不應該是'fixed'嗎？因爲它是相對於瀏覽器窗口，因此在頁面中存在垂直滾動。 – Coderaemon
將這個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();
或某些eq uivalent。
其他方法來horizontaly和verticaly中心一個div內的圖像：
HTML：
<div>
<img src="http://lorempixel.com/output/people-q-g-50-50-1.jpg" alt="" />
</div>
CSS：
div{
position:relative;
}
img{
position:absolute;
top:0; bottom:0;
left:0; right:0;
margin:auto;
}
戴夫·摩根的解決方案爲我工作。
這是一個更清潔的版本。
上述所有解決方案的問題在於，您需要事先在容器中創建一些圖像或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;
}
用途：
display:inline-block;
或者：
display:block;
和：
text-align:Center;
裏面的CSS文件... 然後，它會出現
是這樣的，但問題與樣本，它只是顯示單一的加載器圖像，如果有多個加載器在頁面上相同，基本上我有不止一個div在頁面上包含該加載器 – Joper
哦，當我設置div'位置：相對'它的工作方式 – Joper
I設置th e位置，頂部/左側和邊距到包含圖像的div。查詢放入html中，並在onReady時再次將其刪除。 – erm3nda