Вертикальное центрирование div с изображениями в процентах

Question

В настоящее время я программирую свое новое веб-портфолио. Все идет нормально. Я решил сделать это полностью на основе%, и я борюсь с одной последней деталью:

Я должен центрировать изображения на основе% по вертикали в блоке div, который также основан на%.

Вот скрипка: http://jsfiddle.net/PX4tF/4/

Это код, который не работает так, как я хочу:

$(document).ready(function(){

         $(window).resize(function(){

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

         });

         // To initially run the function:
         $(window).resize();

        });

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

Вот ссылка на бета-сайт: http://www.zeiteffekt.de/relaunch

Я не тот программист, поэтому надеюсь, что вы, ребята, сможете мне помочь с этим.

Ура, Тим

Answer 1

Попробуйте что-то вроде этого

function alignImage()
{
    $('.vertical_center').css({
        position:'relative',
        left: ($(window).width() - $('.vertical_center').outerWidth())/2,
        top: ($(window).height() - $('.vertical_center').outerHeight())/2
    });
}
$(window).load(function() {
    alignImage();
});
$(window).resize(function() {
    alignImage();
});

Изображения не готовы, когда вызывается $(document).ready. Используйте вместо нагрузки

Answer 2

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

 $(window).resize(function(){
        $( ".img-swap").each(function() {
            $(this).css({
               position:'relative',
               marginTop: ($(this).parent().outerHeight() 
                - ($(this).outerHeight()+15))/2
             });
         });
});

jsfiddle
Я заменяю marginTop вместо top Так как marginTop поможет подтолкнуть текст чуть ниже изображения в то время как top только push-изображение.