Jak wyświetlić obraz w centrum div

Question

Mam div z ajax-loader GIF

<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); 
} 

Ale nie mógł się on wyświetlany w centrum (zarówno w pionie jak i poziomie). Potrzebujesz pomocy.

Answer 1

dodaje się zakłada, że ​​szerokość i wysokość obrazu jest znana:

#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 W przeglądarkami margin: auto spowoduje pożądany efekt withing znając szerokość/wysokość zdjęcia:

#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>

Answer 2

Można to zrobić z atrybutu align

<div id="mydiv" align="center"> 
<img src="/Content/ajax-loader.gif" class="ajax-loader"/> 
</div> 

Answer 3

Pełna ajax loader ekran, z pewnym kryciem.

użyciu

$('#mydiv').show(); 
$('#mydiv').hide(); 

, aby go włączyć.

#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> 

Answer 4

Place to dział tylko wewnątrz obszaru aktualizowanego:

<div id="myLoader" class="ajax-loader"></div> 

i dodać do swojego 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; 
} 

Gdy chcesz je wyświetlić, wystarczy zadzwonić:

$('#myLoader').css({ 
    height: $('#myLoader').parent().height(), 
    width: $('#myLoader').parent().width() 
}); 
$('#myLoader').show(); 

lub kilka eq dwuwalentny.

Answer 5

Inne podejście do centrum poziomo i verticaly obraz wewnątrz div:

1. nieznany rozmiar obrazu
2. unkown div rozmiar
3. reaguje

DEMO

HTML:

<div> 
    <img src="http://lorempixel.com/output/people-q-g-50-50-1.jpg" alt="" /> 
</div> 

CSS: rozwiązanie

div{ 
    position:relative; 
} 

img{ 
    position:absolute; 
    top:0; bottom:0; 
    left:0; right:0; 
    margin:auto; 
} 

Answer 6

Dave Morgan pracował dla mnie.

Oto nieco bardziej czysta wersja tego.

Problem ze wszystkimi powyższymi rozwiązaniami polega na tym, że przed ręcznym utworem należy utworzyć obraz lub element div w pojemniku. To marnowanie zasobów i utrudnia zastosowanie do konkretnych celów. Niech jquery wygeneruje div zamiast tego.

Oto mój kod:

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; 
} 

Answer 7

Zastosowanie:

display:inline-block; 

Lub:

display:block; 

I:

text-align:Center; 

Wewnątrz pliku CSS ... Następnie pojawi się ona