我想知道是否有一种简单的方法来垂直居中响应图像.
请参考以下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.
任何帮助是极大的赞赏！
解决方法
有几种方法可以做到 – 纯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%);
}
老答案
对于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;
}
可以看到功能性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/
