响应式布局中的中心图像

Question

我正在尝试设置一个响应式标头，它会将图像调整大小并将其调整到浏览器 - 这很容易。我无法实现的是将图像垂直居中于其容器内（在本例中为a元素）

参见示例： http://jsfiddle.net/jwoodcreative/tUW3k/

我尝试了一些没有用的css技巧和一些jQuery。如果有人知道，那么任何一种解决方案都适合。

Answer 1

赞this？我已经将图像更改为背景图像，它可以很容易地在CSS中居中。为了确保显示链接，我添加了一个不间断的空格（ ）。我想这就是你想要的，对吧？

您可以在背景属性的文档中查看here来更改图像的外观。

Answer 2

你可以随时使用顶部：50％，底部：50％技巧，如：jsfiddle v13

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

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

这是有效的，因为innerElement的高度与外部Element的高度不同，所以你可以将你的元素居中（如果高度相同，你只需将它定位到pos：0再次）< / p>