Поместите изображение в начало и в центр div

Я видел много вариантов этого вопроса, но не нашел желаемого ответа.Поместите изображение в начало и в центр div

Я хотел бы поместить центр изображения перед div.

Если у меня есть div, что загружается содержание Ajax, я (с использованием css, jquery, однако) поместить изображение перед div, который загружает, а затем удалить его, когда div по окончании загрузки. Теперь, хотя это и есть ситуация, решение не должно ограничиваться этой конкретной ситуацией. Надеюсь, что я (и кто-либо еще) сможет это сделать, когда им нужно перегрузить изображение на div.

Это основная точка. Я не хочу седеть на весь экран и поместить изображение в центр окна, или положить его ниже, или сбоку, или в абсолютном положении. Эти вещи относительно просты. Я хочу, чтобы изображение smack-dab находилось в середине заданного div, где бы это ни было div.

ПРИМЕЧАНИЕ. Я бы предпочел решения, которые не требуют дополнительного плагина jquery. Я хотел бы использовать как можно меньше кода, чтобы выполнить работу.

источник

2013-07-24 MirroredFate

Является ДИВ фиксированного размера? В противном случае, если он не загружен, у него не будет определения высоты и ширины. –

Вы можете сделать div в загрузочном div, а затем установить свойство margin: auto auto; '. Когда AJAX загружается, используйте jQuery для установки отображения div на 'display: none;' –

Должна использоваться текущая высота и ширина div. Как я уже сказал, не увязывайся в специфике использования ajax. В основном есть только div, которому требуется изображение, наложенное в центре. @ RyanSparks Не могли бы вы быть более конкретными? – MirroredFate

Поместите изображение, которое вам нравится с CSS. Если изображение не меняется размер, это может работать:

.mydiv { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -#px (where # is half the width of the image); 
    margin-top: -#px (where # is half the width of the image); 
}

А потом сделать что-то вроде этого, чтобы определить, когда страница загружается и скрыть DIV. Вы также можете использовать .remove(), если хотите.

$(window).load(function() { 
     $(".mydiv").hide(); 
});

Чтобы ориентировать конкретный элемент и обнаружить, если он загружен, сделать $ ("mydiv.") Нагрузки (функция() {}).

Следует отметить, что существует множество других способов центрирования изображения в середине div. Вы можете сделать width: 100%; height: 100%; с position: absolute; и z-index: 1;, а затем поставить изображение как background: url('myimage.png') no-repeat scroll center center transparent;.

Вы можете сделать это с помощью: до или: после псевдоэлемента, так что вам даже не нужно ничего добавлять к HTML.

Вы также можете установить и тегов в нижней части DIV, а затем изображение display: block; и margin: auto auto; и т.д.

источник

2013-07-24 23:59:00

Поместите изображение в начало и в центр div

ответ

Смежные вопросы