定位div中心，例如height：auto;

我不能相信我問這個，但我有一個頁面裏面的包裝中心div有一個div與4盒和另一個div與它的內容。這些框永遠不會改變大小，但內容框會。爲了保持一致性，我希望div中的內容位於頁面中心的中間位置，因此每當添加更多內容時，它始終位於該位置。出於某種原因，我試過高度/邊距：自動和許多方法，它只是不會中心。定位div中心，例如height：auto;

我在這裏鏈接了一個div佈局的簡單示例，以及每個div的樣式，認真請告訴我這是我很容易錯過的東西 - 真的很尷尬！

這裏所有代碼： http://jsfiddle.net/SBFrq/3/

eg 
<div class="wrapper"> 
    <div class="thumbnails"> 
     <div class="col-13">thumbnail1</div> 
     <div class="col-13">thumbnail2</div> 
     <div class="col-13">thumbnail3</div> 
     <div class="col-13">thumbnail4</div> 
    </div> 
    <div class="content-wrapper"> 
     <div class="content"> 
      Content 
     </div> 
    </div> 
</div>

感謝

來源

2013-05-22 user2212564

我想你會需要javascript – Morpheus

我不明白，你想把你的內容div在哪裏？在頁面底部？你嘗試過'position：absolut'和'bottom：10px'嗎？ –

沒有不在底部只是內容div一半到左邊的div，當更多的文本被添加的div擴展，但保持在包裝div的一半。對不起，如果我與示例的鏈接不明確 – user2212564

這些內嵌樣式的調整應該做的伎倆（如果我明白你的好）。

.content-wrapper上的高度是一個粗略的估計值，所以您需要調整它。

<div class="wrapper"> 
    <div class="thumbnails"> 
     <div class="col-13">thumbnail1</div> 
     <div class="col-13">thumbnail2</div> 
     <div class="col-13">thumbnail3</div> 
     <div class="col-13">thumbnail4</div> 
    </div> 
    <div class="content-wrapper" style="height: 500px; display: table; position: relative; overflow: hidden;"> 
     <div class="content" style="top: 50%;display: table-cell; vertical-align: middle;"> 
      <div style="position: relative; #top: -50%"> 
      ContentContentContent 
      <br>ContentContentContent 
      <br>ContentContentContent 
      <br>ContentContentContent 
      <br>ContentContent 
      <br>ContentContentContent 
      <br>ContentContent 
      <br>ContentContentContent 
      </div> 
     </div> 
    </div> 
</div>

來源

2013-05-22 15:07:27 veelen

讓我有一個發揮這個代碼，我會讓你知道，謝謝:) – user2212564

這不是你的意思？ – veelen

定位div中心，例如height：auto;

回答

相關問題