Làm thế nào để hiển thị hình ảnh ở trung tâm của một div

Question

Tôi đã div với hình ảnh gif ajax-loader

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

Nhưng không thể có được nó hiển thị ở trung tâm (cả theo chiều dọc và theo chiều ngang). Cần giúp đỡ với điều đó.

Answer 1

Sau đây giả định rằng chiều rộng và chiều cao của hình ảnh được biết:

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

CẬP NHẬT: trong các trình duyệt hiện đại margin: auto sẽ tạo ra kết quả mong muốn withing biết chiều rộng/chiều cao của hình ảnh:

#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

Bạn có thể làm điều đó với thuộc tính gắn kết

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

Answer 3

Full loader màn hình ajax, với một số opacity.

sử dụng

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

để chuyển đổi nó.

#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

Nơi này div chỉ bên trong khu vực bạn đang cập nhật:

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

Và thêm video này vào css của bạn:

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

Khi bạn muốn hiển thị nó, chỉ cần gọi:

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

hoặc một số eq uivalent.

Answer 5

cách tiếp cận khác để tập trung horizontaly và verticaly một hình ảnh bên trong một div:

1. hình ảnh chưa được biết kích thước
2. unkown div kích thước
3. đáp ứng

DEMO

HTML:

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

CSS: giải pháp

div{ 
    position:relative; 
} 

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

Answer 6

Dave morgan của làm việc cho tôi.

Đây là phiên bản sạch hơn một chút.

Sự cố với tất cả các giải pháp ở trên là bạn cần tạo một số hình ảnh hoặc div trong vùng chứa của mình trước khi thực hiện. Đó là một sự lãng phí tài nguyên và gây khó khăn cho việc áp dụng cho các mục tiêu cụ thể. Hãy để jquery tạo ra div thay vào đó.

Đây là mã của tôi:

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

Sử dụng:

display:inline-block; 

Hoặc:

display:block; 

Và:

text-align:Center; 

Bên trong file CSS ... Sau đó, nó sẽ xuất hiện