垂直居中的图像重叠文本

Question

我正在使用垂直居中图像的网站。页面上还有一个段落，我希望它在图像下方。我无法想象这样做，并且当调整窗口大小时，图像与文本重叠。 http://jsfiddle.net/qkmuM/我的CSS是

img {
    margin:auto;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    max-width:900px;
}

关于如何获得我想要的任何想法？感谢。

Answer 1

从display: absolute标记移除 img ，因为该元素相对于其正文定位。

检查fiddle

更新：我想我已经指出了，将图像置于中间和段落下方。现在更改它

img {  // To vertically align the image
    margin: 0 auto;
    display: table-cell;  
    max-width: 200px;
    vertical-align: middle;
}
p {
    text-align:center;
}

JSFiddle

Answer 2

你可以设置段落的最高位置。

p {
  position:relative;
  top: Xpx    //(set it according to your requirement)
}