Как я могу вертикально центрировать div, не зная высоты родителя?

Здравствуйте, я надеюсь, что вы можете мне помочь. Я пытаюсь вертикально центрировать div, но я продолжаю терпеть неудачу. Я думаю, проблема в том, что div представляет собой галерею, состоящую из 2 элементов: основные изображения, которые нельзя прокручивать, потому что они соответствуют экрану, - миниатюры (которые появляются через jquery hide/show и скрывают основные изображения, нажав на конкретный значок) . Я не могу центрировать дочерний div (галерею), потому что я не могу установить высоту родительского элемента (контейнера страницы), потому что мне нужно, чтобы миниатюры можно было прокручивать. но я хочу, чтобы основные изображения были сосредоточены на странице...

вот мой html-код (основное я сохранил):

<!--page -->
<div id="gallery-container">

<!-- main images -->        
<div class="cycle-slideshow">
<img src="img.jpg">  
</div>

<!-- thumbnails -->
<div class="thumbs">
<img src="img.jpg">
</div>

<!-- jquery hide/show code -->
<script type="text/javascript">
$('.thumbsicon').on('click', function() {
$('.cycle-slideshow').hide(); $('.thumbs').fadeIn();
});
$('.thumbs li img').on('click', function() {
var imgSrc = $(this).attr('src');   
$('.cycle-slideshow').fadeIn('slow').css('background-image', 'url( + imgSrc + )');
$('.thumbs').hide(); 
});
</script>
</div>

И css (учитывайте, что на моем сайте слева есть боковое меню размером 250 пикселей):

#gallery-container{width:700px;z-index:70;margin:0   auto;position:relative;overflow:hidden;padding:0 20px 0 270px;}

.cycle-slideshow {width:700px;height:517px;margin:0 auto;padding:0;position:relative;}

.thumbs {position:relative; width:700px; margin:0 auto; padding:0; display:none;}

Я пробовал много решений css, но ни одно из них не работает. Что я могу сделать? Заранее спасибо...


jquery css responsive-design center absolute
person Sarah    schedule 31.01.2014    source источник

Ответы (4)


arrow_upward
0
arrow_downward

вот stackoveflow, из которого я некоторое время назад адаптировал код принятого ответа для своих целей. Вот что мне нужно разместить в окне или в родительском элементе:

Использование jQuery для центрирования DIV на экране

Демонстрация: http://jsfiddle.net/6P7AM/1/

jQuery.fn.center = function (centerToWindow) {
    var parent = null;
    var positionCss = null;
    if (centerToWindow) {
        parent = window;
        positionCss = "absolute";
    } else {
        parent = this.parent();
        positionCss = "relative";
    }
    this.css({
        "position": positionCss,
            "top": Math.max(0, (($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop()) + "px",
            "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
    return this;
}

$(function () {
    $(window).resize(function () {
        $("#gallery-container").center(true);
    }).trigger("resize");
});
person Joel    schedule 31.01.2014
comment
Спасибо, я попробую это и дам вам знать! - person Sarah; 31.01.2014
comment
Отлично работает! Не знаю, почему я не подумал об использовании jQuery, большое спасибо :-) - person Sarah; 31.01.2014

arrow_upward
0
arrow_downward

Для родителя, содержащего элементы, которые вы хотите центрировать, установите эти свойства CSS.

дисплей: таблица-ячейка; вертикальное выравнивание: посередине;

person httpgio    schedule 31.01.2014
comment
Спасибо, но я уже пробовал это и, к сожалению, не работает - person Sarah; 31.01.2014
comment
Попробуйте применить позицию относительно родительского контейнера и абсолютную позицию к тому, что вам нужно по центру. Затем для центрированного элемента примените следующие свойства CSS: position:absolute;top:50%; - person httpgio; 01.02.2014

arrow_upward
0
arrow_downward

Вы должны найти то, что хотите, в этом посте: http://css-tricks.com/centering-in-the-unknown/

person jeremy castelli    schedule 31.01.2014

arrow_upward
0
arrow_downward

если вы не знаете высоту родителя, вы можете получить ее в jQuery с помощью

var parentHeight = $('#gallery-container').height();

затем вы можете использовать parentHeight в своем коде, чтобы помочь вам центрироваться следующим образом:

var parentHeight = $('#gallery-container').height();
$('#gallery-container').css('margin-top', '-' + (parentHeight + 'px');

и тогда, конечно, вам нужно будет иметь это в своем css:

#gallery-container {
    position: absolute;
    top: 50%;
}

убедитесь, что вы вызываете этот код центрирования на $(document).ready();, конечно, но также и на $(window).resize();

person jrobson153    schedule 31.01.2014
comment
Спасибо, я попробую это и дам вам знать! - person Sarah; 31.01.2014