центральное изображение в адаптивном макете

Question

Я пытаюсь настроить адаптивный заголовок, который берет изображение и изменяет его размер в браузере - достаточно просто. Чего я не могу добиться, так это центрирование изображения по вертикали внутри контейнера (в данном случае a элемент)

См. Пример: http://jsfiddle.net/jwoodcreative/tUW3k/

Я попробовал несколько трюков css, которые не сработали, и немного jQuery. Любой тип решения подойдет, если кто-нибудь знает о нем.

Answer 1

Вы всегда можете использовать верх: 50%, низ: 50% трюк, как здесь: jsfiddle v13

.outerElement {
    position: relative;
    height: XXpx;
    top: 50%;
}

.innerElement {
    position: absolute;
    bottom: 50%;
}

Это работает, потому что высота элемента innerElement не совпадает с высотой внешнего элемента, поэтому вы можете центрировать свой элемент (если бы высоты были одинаковыми, вы просто поместили бы его в pos: 0 снова)

Answer 2

Как это ?Я изменил изображение на background-image, которое очень легко центрировать в CSS.Чтобы убедиться, что ссылка показана, я добавил неразрывный пробел ( ).Я думаю, это то, что вы хотите, верно?

Вы можете изменить внешний вид изображения, посмотрев здесь в документации по свойству background.