CSS - 中心内容比页面宽 [英] CSS - Center content that's wider than the page
问题描述
这里有一个简单的谜题，我今天一直在挫败我：
Here's a simple puzzle that's been frustrating me for a while today:
考虑这个页面标记：
<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
我尝试了各种各样的技巧（包括 text-align：中心;显示：inline-block; ）和绝对定位，但是所有的 div＃content
I've tried a variety of tricks (including text-align: center; display: inline-block;) and absolute positioning, but with all of them the div#content is left-aligned when the browser window is brought under 750px in width.
我看过几个高调的网站在过去这样做。例如在Apple.com上，当他们宣传新的视网膜iPad：iPad图片是一个非常宽的图像，延伸到主页面区域（注意它不是一个CSS背景图像的< body& 元素），但它没有导致滚动时，浏览器窗口只适合主页内容。很遗憾，我似乎找不到任何现有的网站，因此我找不到参考。
I've seen a few high-profile websites do this in the past. For example on Apple.com when they advertised the new retina iPad: the iPad pictured was a very wide image that extended past the main page area (note it was not a CSS background image of the <body> element), but it didn't cause scrolling when the browser window only fit the main page content. Unfortunately I can't seem to find any existing sites that do this so I can't find a reference.
谢谢。
推荐答案
是这样吗？查看 - > http://jsfiddle.net/joplomacedo/CkvuG/
Is this it? Take a look -> 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%;
}
这篇关于CSS - 中心内容比页面宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
