Вертикальное выравнивание абсолютного позиционированного div внутри содержащего div - PullRequest
Новая
       11

Вертикальное выравнивание абсолютного позиционированного div внутри содержащего div

5 голосов
/ 02 ноября 2009

Я использую плагин jQuery Cycle для поворота изображений в режиме слайд-шоу. Это отлично работает. У меня проблема с получением этих изображений (разных размеров) по центру в содержащем div. Изображения находятся внутри div слайд-шоу, положение которого установлено абсолютным с помощью плагина Cycle.

Я пробовал установить высоту линии / вертикальное выравнивание и еще много чего, но не играли в кости. Вот соответствующий HTML и CSS

HTML: 

<div id="projects">
  <div class="gallery">
     <span class="span1">&#9668;</span><span class="span2">&#9658;</span>
        <div class="slideshow">
          <img src="images/img1.png"  />
          <img src="images/img1.png"  />
          <img src="images/img1.png"  />
        </div>
  </div>
</div>

CSS: 

#main #home-column-2 #projects
{
  width: 330px;
  background: #fefff5;
  height: 405px;
  padding: 12px;
}

#main #home-column-2 #projects .gallery
{
  width: 328px;
  height: 363px;
  position: relative;
  background: url('images/bg-home-gallery.jpg');
}

#main #home-column-2 #projects .gallery img
{
  position: relative;
  z-index: 10;
}

А если вы захотите это увидеть, jQuery: 

$('#home-column-2 #projects .gallery .slideshow').cycle(
{
   fx: 'scrollHorz',
   timeout: 0,
   next: "#home-column-2 #projects .gallery span.span2",
   prev: "#home-column-2 #projects .gallery span.span1"
});

Есть идеи по центру этих изображений?

Ответы [ 4 ]

1 голос
/ 02 ноября 2009

Попробуйте это:

http://www.brunildo.org/test/img_center.html

Вертикальное центрирование - это боль! Вот что говорит W3C страница о вертикальном центре:

Уровень CSS 2 не имеет свойства для центрирования вещей по вертикали. Там вероятно будет один на уровне CSS 3. Но даже в CSS2 вы можете центрировать блоки вертикально, объединяя несколько свойства. Хитрость заключается в том, чтобы указать что внешний блок должен быть отформатирован как ячейка таблицы, потому что содержимое ячейки таблицы может быть по центру вертикально.

1 голос
/ 07 июля 2012

Этот метод включает в себя немного jquery, но в большинстве случаев работает фантастически ... позвольте мне объяснить:

если все изображения слайд-шоу содержатся в их собственном элементе div pos: absolute и эти изображения имеют pos: относительный, то в $ (window) .load () вы можете запустить .each () и найти каждый img в слайд-шоу и настройте его верхнее положение, чтобы сместить определенное количество пикселей от верха.

jcycle автоматически устанавливает для каждого родительского элемента div, содержащего изображение, значение pos: absolute в каждом последующем (), поэтому применять эту настройку pos к ним бесполезно ... вместо этого нацеливайте каждое изображение, которое вы установили, на pos :lative ...

Вот пример: 

$(window).load(function() {

  // move all slides to the middle of the slideshow stage
  var slideshowHeight = 600; //this can dynamic or hard-coded

  $('.slideImg').each(function(index) {

    var thisHeight = $(this).innerHeight();
    var vertAdj = ((slideshowHeight - thisHeight) / 2);
    $(this).css('top', vertAdj);

  });

});

и это HTML, на котором он работает ... 

<div class="slideshow" style="position: relative; ">

   <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0">
       <img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery -->
   </div>


   <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1">
       <img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery -->
   </div>


   <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2">
       <img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery -->
   </div>


</div>

просто убедитесь, 

.slideImg {
    position:relative;
}

Я думаю, что это все ... У меня есть пример, но он есть на сайте разработчиков ... так что эта ссылка может не сохраняться долго ... но вы можете взглянуть на это здесь: http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html

0 голосов
/ 30 апреля 2013

Вам нужно вложить два элемента внутри каждого элемента цикла. Первый должен иметь отображение: inline-table; а второй должен иметь отображение: table-cell; оба этих элемента имеют вертикальное выравнивание: среднее.

Таким образом, структура будет выглядеть примерно так: 

<div class="slide-container">
    <div class="slide">
        <div class="outer-container">
            <div class="inner-container">
                Centered content
             </div>
        </div>
    </div>

    <div class="slide">
        <div class="outer-container">
            <div class="inner-container">
                Centered content
             </div>
        </div>
    </div>
 </div>

Со следующим css: 

.slide-container {
    height: 300px;
}
.outer-container {
    height: 300px;
    display: inline-table;
    vertical-align: middle;
}
.inner-container{
    vertical-align: middle;
    display: table-cell;
}

Вы можете увидеть, как это работает здесь http://jsfiddle.net/alsweeet/H9ZSf/6/

0 голосов
/ 02 ноября 2009

Позиции являются относительными в соответствии с таблицей стилей, поэтому вы пытались установить их на display: block и margin-top: auto; margin-bottom: auto;?

Другой вариант - выровнять их вручную в javascript в зависимости от высоты содержащего элемента.

...