Как отображать изображение в центре div

У меня есть div с изображением 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); 
}

Но он не мог отображаться в центре (как по вертикали, так и по горизонтали). Нужна помощь с этим.

Ответы

Ответ 1

Далее предполагается, что ширина и высота изображения известны:

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

Ответ 2

Полноэкранный загрузчик ajax с некоторой непрозрачностью.

используя

$('#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>

Ответ 3

Поместите этот 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();

или некоторый эквивалент.

Ответ 4

Другой подход к горизонтальной и вертикальной ориентации изображения внутри div:

  • неизвестный размер изображения
  • unkown div size
  • отзывчивый

DEMO

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

Ответ 5

Использование:

display:inline-block;

Или:

display:block;

и

text-align:Center;

Внутри файла CSS... Затем он появится

Ответ 6

Вы можете сделать это с выравниванием атрибута

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

Ответ 7

Дэйв Морган решил работать для меня.

Вот немного более чистая версия.

Проблема со всеми вышеизложенными решениями заключается в том, что перед созданием контейнера необходимо создать какое-либо изображение или 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;
}