Question

你好我试图将背景图像的中心保持在屏幕的中心即使浏览器调整得非常小。我可以水平但不垂直。我创建了一个小提琴链接来演示（如果你调整浏览器的大小你可以看到水平居中的背景图像。 fiddle link

这是我到目前为止的css代码：

 #container {

height:450px; background-image:url('http://oi58.tinypic.com/5an82h.jpg');
margin: 0 auto;
background-repeat: no-repeat;
background-position: center;
background-color: #9FBBE2; }

我能做些什么来保持背景图像垂直居中？我希望在这个bkgrnd图像的顶部放置另一个div或table。

感谢您的帮助：）

Answer 1

问题是你的#container，它是固定的高度，顶部没有边距，即使bg正确居中，它仍然是相对于窗口的顶部。

检查这个更新的小提琴，也许可以帮助你更好地理解 http://jsfiddle.net/cCH2Z/117/

但老实说，我不认为您的解决方案是出于以下原因的最佳选择：

如果此背景是整个应用的整个bg，为什么要将其放在#container？为什么不直接将其放入body或html元素？
如果＃1不正确，您仍然可以更好地控制它。将#container水平划分为2个/更多部分，使用边距来控制标题位置的关系。

<html>
  ...
  <body>
    <div id="container">

      <div id="top">
        <!-- Here goes your content need to over the top of bg -->
      </div>

      <!-- Adjust distance between #top and #center -->

      <div id="center">
        <!-- Here goes your bg and other stuff -->
      </div>

      ...
    </div>
  </body>
</html>

中心背景垂直

1 个答案: