вертикально центрирующийся текст в jquery кладке

Question

Я использую кладку jquery для отображения изображений. На этих изображениях у меня есть скрипт, который позволяет мне переворачивать и добавлять заголовки. Однако я хотел бы, чтобы они были идеально отцентрированы внутри коробки. С кладкой Jquery не существует абсолютного значения высоты. Есть ли в любом случае, чтобы расположить вещи вертикально, как вы можете горизонтально (похожий на: поле справа: авто; Маржа налево: авто; ясно: оба;)

Прямо сейчас позиционирование установлено на 50% сверху, однако на меньших элементах заголовки отображаются не по центру.

Вот ссылка на мой прогресс: http://geoffjohnsondesign.com/inprogress

Спасибо за вашу помощь!

Geoff

Answer 1

Довольно поздно, но здесь все идет ..

Вам нужно поместить заголовок на 50%, но переместить его вверх на половину размера заголовка.Для этого мы используем поле ..

Поэтому замените код, который скрывает подписи в вашем коде jQuery, на

$('.thumbnail .caption')
    .css({ marginTop: function(elem,val){ return $(this).outerHeight()/-2; } })
    .hide();

Answer 2

Попробуйте это: первое, что вы хотите сделать, это установить display: inline-block и position: relative для вашего содержащего элемента: link (вы хотите назначить определенный класс этим элементам, а не устанавливать его для каждого страница):

a:link {
    display: inline-block;
    position: relative;
    text-decoration: none;
}

Как только вы это сделаете, вы можете установить вертикальные поля для ваших элементов.

.thumbnail .caption {
    margin: 50% auto;
    position: absolute;
    text-decoration: none;
    top: 0;
    width: 100%;
}

Посмотрите, работает ли это.