4

这是一个简单的谜题，今天让我沮丧了一段时间：

考虑这个页面标记：

<head>
    <style type="text/css">
        #wrapper { overflow: hidden; }
        #content { width: 750px; height: 100px; background: orange; }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content">Foo bar</div>
    </div>
</body>

无论视口宽度如何，我如何才能div#content在页面中居中？

我尝试了各种技巧（包括）和绝对定位，但是当浏览器窗口的宽度低于 750 像素时text-align: center; display: inline-block;，所有这些都是左对齐的。div#content

过去我见过一些知名网站这样做。例如在 Apple.com 上他们为新的 Retina iPad 做广告时：图片中的 iPad 是一个非常宽的图像，超出了主页区域（注意它不是<body>元素的 CSS 背景图像），但它不会导致滚动当浏览器窗口只适合主页内容时。不幸的是，我似乎找不到任何这样做的现有网站，所以我找不到参考。

谢谢。

4

3 回答 3

5

是这个吗？看看-> http://jsfiddle.net/joplomacedo/CkvuG/

HTML

<div id="page">
  <div id="main">
      <div id="extended-out"><img src="http://myfreeipad.us.com/wp-content/uploads/2011/10/ipad.png" /></div>
  </div>
</div>

CSS

#page {
  overflow: hidden;
  min-width: 200px; /*same as #mains width*/
}

#main{
  position: relative;
  height: 500px;
  width: 200px;
  margin: 0 auto;
  background-color: lightgreen;
}


#extended-out { 
  height: 200px;
  margin: 0 -100px;
  background: indianred;
  border: 1px solid red;
}

#extended-out img {
    width: 100%; height: 100%;
}

​</p>

于 2012-07-04T19:32:52.380 回答
-1

http://jsfiddle.net/CNNcV/ 

<head>
        <style type="text/css">
            #wrapper { overflow: hidden; }
            #content { width: 750px; height: 100px; background: orange; 
            margin:0px auto;
            width:100%;}
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">Foo bar</div>
        </div>
    </body>​

那是你要找的吗？

于 2012-07-04T17:39:30.560 回答
-1

加上margin: auto这个，

#content { width: 750px; height: 100px; background: orange; margin: auto}
于 2012-07-04T17:39:34.913 回答