CSS - 中心內容，它比頁面

這裏更廣泛的是一個簡單的難題，一直在今天折騰我了一會兒：CSS - 中心內容，它比頁面

考慮一下這個頁面標記：

<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: center; display: inline-block;）和絕對定位，但當瀏覽器窗口寬度小於750px時，它們都是左對齊的。

我見過一些知名網站在過去這樣做。例如，在Apple.com上，當他們宣傳新的視網膜iPad時：iPad的照片是一個非常寬的圖像，延伸到主頁面區域（請注意，它不是<body>元素的CSS背景圖像），但它不會導致當瀏覽器窗口只適合主頁面內容時滾動。不幸的是，我似乎無法找到任何現有網站這樣做，所以我找不到參考。

謝謝。

來源

2012-07-04 Dai

是這個嗎？看看 - >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%; 
}

來源

2012-07-04 19:32:52 banzomaikaka

是的，這是有效的;謝謝 – Dai

-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-04 17:39:30 Amaerth

沒有，因爲當瀏覽器窗口小於750px窄'DIV＃content'左邊緣與視口的左邊緣對齊，而不是超出它。 – Dai

-1

添加margin: auto此，

#content { width: 750px; height: 100px; background: orange; margin: auto}

來源

2012-07-04 17:39:34 itsme

這也行不通。它只在瀏覽器視口大於750px時纔會將'div＃content'放在中間;當視口比750px窄時，元素的左邊與視口的左邊接觸。我希望'div＃content'的水平中間始終與視口的水平中間對齊（假設沒有滾動，因此我的CSS中爲「overflow：hidden;」）。 – Dai

爲了更好地理解你，你的意思是當瀏覽器視口比750px窄時，高度應該是相同的？ – itsme

身高無關緊要。我在水平對齊之後，而不是垂直。 – Dai

CSS - 中心內容，它比頁面

回答

相關問題