垂直中心响应图像

Question

我想知道是否有一种简单的方法来垂直居中响应图像.

请参考以下jsFiddle:http://jsfiddle.net/persianturtle/yawTb/1/

基本HTML:

<img class="mobile-title-size" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo">

基本CSS:

.mobile-title-size {
position: absolute;
top: 2.5%;
left: 6%;
width: 70%;
max-width: 300px;

}

这是使用平板电脑和桌面视口上显示的相同图像的移动标题.由于图像已经被加载了,我希望使用相同的图像,将其调整为较小并垂直对齐,以便我可以将一个图像用于所有视口.

问题:在浏览器调整大小时,图像会变小,但不会在中心垂直对齐.

目标:尽管在此示例中宽度严重重叠,但这不是我网站上的问题.目标只是在浏览器调整大小时垂直居中图像.

我可以使用javascript/jQuery解决方案,但当然,首选简单的CSS.

任何帮助是极大的赞赏!

Answer 1

有几种方法可以做到 - 纯CSS或基于JS的方法.

更新的答案

更新:随着CSS转换支持的出现,这里是一个使用纯CSS定位元素的相当优雅的解决方案.使用给定的标记:

<div class="container">
    <img src="..." alt="..." title="..." />
</div>

对于你的CSS:

.container {
    /* The container has to have a predefined dimension though */
    position: relative;
}
.container img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

更新了JSFiddle

老答案

对于CSS,您可以在元素的容器中构造ghost <img>元素.Chris Coyier 对这项技术做了很好的写作.假设您的HTML代码如下所示:

<div class="container">
    <img src="..." alt="..." title="..." />
</div>

然后你的CSS将是:

.container {
    font-size: 0;
    text-align: center;
}
.container:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.container > img {
    display: inline-block;
    vertical-align: middle;
}

可以看到功能性CSS修复工作在这个小提琴 - http://jsfiddle.net/teddyrised/yawTb/8/

或者,您可以使用基于JS的方法:

$(document).ready(function() {
    $(window).resize(function() {
        $(".container > img").each(function() {
            var cHeight = $(this).parent(".container").height(),
                cWidth = $(this).parent(".container").width(),
                iHeight = $(this).height(),
                iWidth = $(this).width();

            $(this).css({
                top: 0.5*(cHeight - iHeight),
                left: 0.5*(cWidth - iWidth)
            });
        });
    }).resize();  // Fires resize event when document is first loaded
});

但是你必须使用以下CSS:

.container {
    position: relative;
}
.container img {
    position: absolute;
    z-index: 100;
}

[编辑]:对于你绝对定位图像元素的基于JS的方法,你必须明确说明.container元素的尺寸,或者在其中有一些内容(但它有点失败的目的,因为图像将在上面内容).这是因为图像元素已从文档流中取出,因此其尺寸不会影响父容器的大小.

JS版本的工作示例在这里 - http://jsfiddle.net/teddyrised/yawTb/7/