Можно ли центрировать изображение на обеих осях внутри div? - PullRequest
Новая
       4

Можно ли центрировать изображение на обеих осях внутри div?

0 голосов
/ 22 апреля 2010

У меня есть скрипт, который загружается в div с изображениями, на которых работает плагин jQuery Cycle Lite.

Я получил подсказку, что я могу использовать функцию «после» в этом плагине, чтобы вносить изменения в изображение при каждом обновлении изображения. Итак, я написал это: 

$("#display div").css({  
  margin: "0 auto",  
  "text-align": "center",  
});

HTML построен так: 

<div id="display">
  <div id="slideshow1">
     <img ... />  
  </div> 
</div>

Это не работает, что не так?
(это должно центрировать его горизонтально, мне нужно центрировать его вертикально) ..

редактирование:
У меня вроде получилось, но все равно нужна помощь, кто-нибудь знает, почему это странно? http://hem.bredband.net/noor/bildspelet.html

спасибо @pekka за ссылку

Ответы [ 2 ]

1 голос
/ 22 апреля 2010

Прежде всего, запятые в объектах JavaScript - это плохие вещи, удалите последнюю запятую.

Во-вторых, вы могли бы вычислить это так: 

var $div = $('#display');
$div.css('position', 'relative');

var $kids = $div.children(); 
// I'm assuming you want to center all the slideshows?
$kids.each(function() {
  var $this = $(this);
  $this.css({
    left: ($div.innerWidth(true) - $this.width()) / 2,
    top: ($div.innerHeight(true) - $this.height()) / 2,
    position: 'absolute'
  });
});

Если посмотреть на ваш образец: ваш <div id="display"> должен иметь установленную высоту (даже 100%) в css, или он всегда будет уменьшаться, чтобы вместить (что, когда все дочерние элементы имеют абсолютное позиционирование, высота будет уменьшаться до нуль). Пожалуйста, посмотрите на пример jsbin

0 голосов
/ 22 апреля 2010

Для подобных вещей решение CSS всегда предпочтительнее, чем решение JS, потому что а) оно работает с отключенным JavaScript и б) оно работает немедленно без задержки и без проблем с синхронизацией, связанных с обеспечением работы макета.в свое последнее пристанище.Но есть ли в этом случае решение CSS?

CSS

Невозможно с заданной вами разметкой центрировать изображение вертикально по кресту-браузерный способ (включая IE 6-8) только с CSS.Тем не менее, небольшое изменение в вашей разметке включает в себя упаковку одноклеточной таблицы, и затем вы можете центрировать по вертикали с помощью vertical-align:middle.Ваша разметка будет выглядеть следующим образом: 

<div id="display">
  <div id="slideshow1">
     <table cellspacing=0><tr><td style="height:200px;padding:0;vertical-align:middle">
       <img ... />
     </td></tr></table>  
  </div> 
</div>

Дополнительный HTML-код, но он сохраняет его по центру без запуска сценария даже при изменении размеров изображения.

JS

Если вы хотите использовать вместо этого JavaScript, похоже, у gnarf правильная идея (кроме того, почему он назвал все свои переменные, начиная со знака доллара?), Я бы взял это и переместил тело в именованную функцию, чтобы выможете звонить, когда захотите (скажем recenter).Для первоначального рендеринга вы хотите, чтобы это произошло как можно скорее, поэтому я бы включил вызов recenter() сразу после DIV-слайдов в разметке.

...