中心水平與邊緣（CSS）

我怎樣才能居中水平div有邊距？中心水平與邊緣（CSS）

<div id="container"> 
    <div id="center_me"></div> 
</div> 


#container{ 
    position:relative; 
    width:100%; 
    height:400px; 
} 

#center_me{ 
    position:absolute; 
    width:100%; 
    margin:0 50px; 
    max-width:300px; 
    height:100%; 
    left:50%; 
    -webkit-transform:translateX(-50%); 
}

我不能使用保證金：0自動，因爲我希望div有餘量;左邊：50％translateX（-50％）技術不考慮邊距。我想在窗口大小調整時流暢地保留邊距（始終居中div並始終保留相同的固定邊距）。我錯過了非常明顯的東西嗎？

http://jsfiddle.net/R3yny/

只是CSS，謝謝。

來源

2014-03-06 Alvaro

可能有助於解釋爲什麼要保留的保證金和/或你的頁面的其餘部分是喜歡。 –

所以如果你想保留邊距，你需要從'left'中減去保留的左邊距。因此，如果你有'margin：0 3％'，那麼你的左邊就會變成'left：47％' – EmileKumfa

@ james-montagne我有一個寬度爲100％的容器div，裏面有一個包含網格的div同位素插件）。在網格中，我可以指定陰溝，但是這不會在網格div中形成陰溝。這就是爲什麼我想在這個div中留有餘量。 – Alvaro

是否有可能，簡單地對另一個DIV的保證金，這裏面#center_me坐鎮？

<div id="container"> 
    <div id="center_me"> 
     <div id="i_have_the_margin"></div> 
    </div> 
</div>

然後你就可以在#center_me使用margin:0 auto;，這樣的 - http://jsfiddle.net/nickg1/R3yny/3/ （在Opera測試）

來源

2014-03-06 04:01:38

有趣，謝謝。這將是一個解決方案。沒有辦法將它保存在兩個div中嗎？ – Alvaro

不是我所知，但其他人可能知道！這就是我將如何解決它。 ;） –

讓我們看看是否有人能想出它。謝謝！ – Alvaro

根據定義，如果你的元素從中心偏移了一個餘量，它不能居中。它聽起來像你想要做的，它在網頁上的中心位置擁有響應式設計。

完成這一工作的最好方法是將邊距寬度用作百分比，並將眼球放在眼睛上，直到它看起來像它在你想要的位置。檢查此樣本OUT-它真的很簡單：

http://codepen.io/staypuftman/pen/oHGAF

CSS：

.hero-text-area-container { 
    background: #d6ffd1; 
    float: left; 
    margin: 0% 30%; 
    padding-top: 20em; 
    position: relative; 
    width: 50%; 
}

來源

2014-03-06 03:57:10 staypuftman

我想要修復保證金 – Alvaro

中心水平與邊緣（CSS）

回答

相關問題