Question

对于凌乱的代码抱歉：

<div style="position: relative;">
    <div style="position: absolute; top: 50%;">This should be vertically centered</div>
    <img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg" width="100%" style="visibility: hidden; position: absolute;"; />
  <img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg" width="100%" />
</div>

http://jsfiddle.net/a5as2/

正如您所看到的，文本几乎垂直居中 - 但随着您缩小宽度，您将看到不是100％精确。现在要解决什么＆lt;

Answer 1

纯css解决方案是将内部div设置为高度，并为其添加边距：-height / 2 px。

示例：

  <div style="position: absolute; top: 50%; height: 20px; margin-top: -10px;">This should be vertically centered</div>

如果您不知道div的高度，可以使用js来获取它，然后重新定位div。

会是这样的（jQuery，直接回答所以可能有一些问题，请调整它。）：

   $("#idDiv").css("margin-top") = parseInt($("#idDiv").height() / 2) + "px";

另一个解决方案是使用table-cell显示，而vertical-align：middle（我个人不喜欢它，但可能符合你的需要）。

Answer 2

这个怎么样？

http://jsfiddle.net/a5as2/3/

.use-a-stylesheet-and-classes-please { top: 50%; position: absolute; }

它在中间，即使你缩小它。

使用media queries缩小时可以放置元素。并且......请不要使用内联样式。

垂直中心的东西，在IMG里面

2 个答案: