Вертикально центр дивы с JQuery

Я разрабатываю сайт на одну страницу, я хочу вертикально центрировать содержащий DIV в DIV с 100% высоты окна просмотра, в настоящее время у меня есть -Вертикально центр дивы с JQuery

function vertmiddle() { 
    var height = $('.vertmiddle').height(); 
    var windowheight = $(window).height(); 
    var vertmiddle = ((windowheight) - (height))/2; 
    vertmiddle = parseInt(vertmiddle) + 'px'; 
    $(".vertmiddle").css('margin-top',vertmiddle); 
} 

$(document).ready(function() { 
    vertmiddle(); 
    $(window).bind('resize', vertmiddle); 
});

Редактировать, вот пример HTLM я использую, а также -

<section id="community" class="full"> 
    <div class="container"> 
     <div class="vertmiddle"> 
     content 
     </div> 
    </div> 
</section>

это работает нормально, но все мои содержащие дивы получают одинаковое количество маржи, потому что все они используют один и тот же класс, и это только с помощью первого DIV на высота страниц.

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

Извините, если я не понимаю, что я новичок здесь.

благодаря

источник

2015-02-26 Jackson

Ознакомились вы документацию для [.each()] (http://api.jquery.com/each/)? Вам нужно пройти через спички, если вы хотите, чтобы они располагались по-другому. –

В vertmiddle() попробуйте выполнить итерацию по всем элементам с заданным классом, а затем используйте «$ (this)» для вычисления. –

вы должны использовать разные имена классов или разные идентификаторы для каждого из которых содержит div –

Используйте эту

function vertmiddle() { 
    $('.vertmiddle').css({ 
     'position' : 'absolute', 
     'left' : '50%', 
     'top' : '50%', 
     'margin-left' : -$(this).width()/2, 
     'margin-top' : -$(this).height()/2 
    }); 
}

Или может быть вы попробуете это

$('.vertmiddle').css({ 
     position:'absolute', 
     left: ($(window).width() - $('.vertmiddle').outerWidth())/2, 
     top: ($(window).height() - $('.vertmiddle').outerHeight())/2 
    });

источник

2015-02-26 04:42:31

Я пробовал это, он не работает – Jackson

Вот решение, которое работает, но вам нужно будет добавить идентификатор атрибуты в HTML. Я нашел попытку вызвать методы jQuery, которые измеряют объекты окна, используя классы, которые очень искажены, где те же методы, используемые в идентификаторах, никогда не дают мне никаких проблем. Во всяком случае, здесь один подход ...

<section id="community" class="full"> 
    <div id="container" class="container"> 
    <div id="content" class="vertmiddle"> 
     content 
    </div> 
    </div> 
</section> 

function vertMiddle(){ 
    var element_height = $('#content').height(); 
    var element_offset = (window.innerHeight - element_height)/2; 
    $('#content').css('margin-top', element_offset +'px'); 
} 

$(document).ready(function(){ 
    vertMiddle(); 
    $(window).on('resize', vertMiddle); 
});

Вот working JSFiddle example

источник

2015-02-26 09:35:51 Epiphany

Вертикально центр дивы с JQuery

ответ

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