jquery - 垂直居中响应图像

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;

这是使用在平板电脑和桌面视口(viewport)上显示的相同图像的移动页眉。由于图像已经被加载，我希望使用相同的图像，将其调整得更小并垂直对齐，以便我可以为所有视口(viewport)使用一个图像。

问题:在浏览器调整大小时，图像确实变小了，但它没有垂直居中对齐。

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

我可以使用 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%);
}

Updated JSFiddle

---

旧答案

对于 CSS，您可以在 <img> 的容器内构建一个 ghost 元素。元素。 Chris Coyier 做了 an excellent write up on this technique .假设您的 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;
}

可以在这个 fiddle 中看到功能性 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/