Вертикально и Горизонтально Центральное Изображение в Отделении, если Вы не знаете Размера Изображения?
Если у меня есть фиксированное размерное контейнерное отделение и неизвестное размерное изображение, как делают меня горизонтально и вертикально центрировать его?
- использование чистой CSS
- использование JQuery, если CSS не может сделать этого
Этот ответ имеет смысл для фиксированных изображений ширины, но не переменные.
Что-то вроде этого структурирует (я имею в виду рендереры объекта, подобные им в списке, но где изображение слева не всегда было бы тем же размером:
-
Some text to the right...
-
Спасибо за справку!
4 ответа
Если установить изображение в качестве фонового изображения и центрировать его таким образом невозможно, jQuery для адаптации ответ, который вы связали для статических изображений , будет выглядеть следующим образом:
$(".fixed-div img.variable").each(function(){
//get height and width (unitless) and divide by 2
var hWide = ($(this).width())/2; //half the image's width
var hTall = ($(this).height())/2; //half the image's height, etc.
// attach negative and pixel for CSS rule
hWide = '-' + hWide + 'px';
hTall = '-' + hTall + 'px';
$(this).addClass("js-fix").css({
"margin-left" : hWide,
"margin-top" : hTall
});
});
при условии, что определен класс CSS как
.variable.js-fix {
position:absolute;
top:50%;
left:50%;
}
с div с фиксированной шириной, имеющим высоту и position: relative .
[важное редактирование js: переключено '.style ()' на '.css ()']
Решение для кроссбраузера
<style>
.border {border: 1px solid black;}
</style>
<div class="border" style="display: table; height: 400px; width: 400px; #position: relative; overflow: hidden;">
<div class="border" style=" #position: absolute; #top: 50%;display: table-cell; text-align: center; vertical-align: middle;">
<div class="border" style="width: 400px; #position: relative; #top: -50%">
<img src="smurf.jpg" alt="" />
</div>
</div>
Для этого вы можете использовать background-position .
#your_div {
background-position: center center;
background-image: url('your_image.png');
}
Использование трюка display: table-cell для div
Правильная работа в: Firefox, Safari, Opera, Chrome, IE8
Пример CSS:
div {
width: 300px;
height: 300px;
border: 1px solid black;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
display: inline;
}
Пример HTML:
<div>
<span></span>
<img src="" alt="" />
</div>