如何居中和調整HTML幻燈片的大小

我再次遇到了我最喜歡的HTML/CSS難題，並將我的頭髮全部撕開。所以這次我想我把我的難題交給了SO的專家。 Here goes ...如何居中和調整HTML幻燈片的大小

想象一下，您想在瀏覽器中展示幻燈片。該規範是簡單的：

幻燈片內容應該由幻燈片框架收縮包裝。
幻燈片框架應該在x和y兩個瀏覽器視口中居中。
幻燈片框架不得超出瀏覽器的視口範圍。
如果幻燈片內容超出了幻燈片框架（此時將展開以完全填充視口），則幻燈片框架應顯示滾動條。

（4）的一個含義是，視口永遠不需要滾動條。

基本上，我期待實現{margin：auto auto; }在我的幻燈片上。我在HTML/CSS去說明我的目標最接近的是這樣的：

<style> 
    html, body { 
    margin: 0; 
    overflow: hidden; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    } 

    #f0 { 
    bottom: 2em; 
    left: 2em; 
    position: absolute; 
    right: 2em; 
    top: 2em; 
    } 

    #d0 { 
    height: 100%; 
    } 

    #c0 { 
    height: 100%; 
    position: relative; 
    width: 50%; 
    } 

    #d1 { 
    height: 100%; 
    position: absolute; 
    right: 0; 
    } 

    #c1 { 
    height: 100%; 
    overflow: auto; 
    position: relative; 
    left: 50%; 
    } 

    #d2 { 
    background: yellow; 
    } 

</style> 

<body> 
    <div id="f0"> 
    <div id="d0"> 
     <div id="c0"> 
     <div id="d1"> 
      <div id="c1"> 
      <table height="100%" cellpadding=0 cellspacing=0> 
       <tr><td id="td" align="Left"> 
    <div id="d2"> 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
     Lorem ipsum... 
    </div> 
       </td></tr> 
      </table> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

您也可以找到這個代碼在這裏：http://jsfiddle.net/qmEYU/9/

的代碼使用了幾乎每一個定位把戲我知道。結果顯示一個居中幻燈片，隨着視口更改動態調整大小。如果視口在幻燈片上摺疊，幻燈片將顯示一個滾動條。

唉，這不可能是答案。至於因爲它看起來可愛，問題是軍團：

要定位scollbar（這實際上限制了表，而不是＃D2）旁邊的（黃色）幻燈片，我需要使用table.width =汽車。爲了集中現在狹窄的桌子，我需要重新回到50％的把戲上。這個技巧的問題在於，它隱含地將可用的中心元素的總寬度減少到不超過視口的50％。
我無法在幻燈片上繪製邊框。原因是這張幻燈片是幻燈片：幻燈片內容（＃d2）位於以TABLE爲中心的TD內部。運輸署不能受到限制;只有TABLE可以。如果我在＃d2周圍畫一個邊框，那麼隨着＃d2展開，TD將讓路，底部邊框溢出。如果我圍繞滾動條所有者＃c1繪製邊框，則如果幻燈片內容摺疊邊框將不再出現在幻燈片周圍，而是圍繞TABLE（空白區域）顯示。
我需要將一些按鈕放在幻燈片下面，我總是希望在幻燈片上顯示，而不考慮幻燈片內容。因爲我不能識別任何元素作爲幻燈片，我無法確定一個空間，無論在哪裏定位按鈕...

我寫了一個JS的解決方案。如果W3C採用IE的動態CSS思路，或者如果我可以對＃d2中的突變做出響應，那麼它的工作就會合理。由於這兩種解決方案在瀏覽器中都不可用，所以我需要手動「製作」我的腳本 - 並不好。

我以爲我張貼在這裏看看是否有人有關於如何在CSS中做到這一點的另一個想法？

感謝您的期待。

來源

2010-09-11 Ollie2893

除了對IE需要50%解決方法之外，您可以使用display:table;margin:0 auto;水平居中。

你可以請一個這樣的jsfiddle嗎？

而你已經用google搜索瞭如何horizontally和vertically center，我拿？

編輯：這是你在找什麼？ http://medero.org/centered-table.html

它必須明確固定IE。但我想知道這是否是你需要的。

來源

2010-09-11 11:40:05

如果我錯誤地改正了我，如果我沿着顯示器走下去：table route然後 - 最好的結果 - 我最終在與TABLE完全一樣的地方。是的，你的方法會讓我居中，但它不會抵制幻燈片內容的任何推下。 – Ollie2893 2010-09-11 12:47:51

從未使用jsfiddle。你能看到這個：http://jsfiddle.net/qmEYU/ – Ollie2893 2010-09-11 12:48:08

你想使用哪種doctype？而且，是的，隨着時間的推移，我必須嘗試互聯網已知的所有CSS技巧來集中處理事情。正如我所說，集中並不是真正的問題 - 我可以通過許多方式到達那裏。這是問題的中心框架的動態尺寸。 – Ollie2893 2010-09-11 12:50:23

如何居中和調整HTML幻燈片的大小

回答

相關問題