居中流體絕對定位部分

所以我知道這是另一個居中問題，但我一直漫遊Google和SO幾天現在沒有解決方案，所以我現在要問。居中流體絕對定位部分

我想要做的是水平居中一個最大寬度的流體部分元素，它具有絕對定位元素。問題是，正如您在我的jsFiddle中看到的那樣，邊距佔用了可用空間的50％，而該部分使用了另外50％。我想要做的是保持該部分完全居中，但使瀏覽器窗口關閉時邊距變小，同時保持該部分不會重新調整大小，直到窗口邊緣到達邊緣。

我想避免使用任何表格，表格單元格解決方案，因爲我閱讀了CSS-Tricks，它們將表格元素絕對定位在表格單元格中可能是一種真正的痛苦。

編輯基本上，目標是讓內容佔用儘可能多的空間，而不必調整大小，直到視口寬度強制內容響應。

謝謝你在正確的方向上碰撞。

HTML：

<section id="wrapper"> 
    <section id="content"> 
     <p>Absolutely positioned imgs, btns, etc. go in here</p> 
    </section> 
</section>

CSS：

#wrapper { 
position:absolute; 
width:50%; 
height:300px; 
margin-left:25%; 
margin-right:25%; 
outline:1px solid red; 
} 
#content { 
position:absolute; 
width:100%; 
height:100%;  
max-width:500px; 
background:rgb(225, 112, 75); 
}

來源

2013-04-15 Matt Whitehead

你可不要試試margin：0 auto;包裝？這會使左右邊距動態調整大小......（除非我誤解了你之後的內容）。 –

@AlexLynham該技巧不適用於絕對定位的元素。 –

啊，我想我誤解了它在這裏的絕對定位元素。我的錯。 –

您可以使用

#content { 
    display:inline-block; 
    text-align:center; 
}

居中的元素，將有一個display:inline-block;財產了。

編輯：現在，我已經更好地閱讀你的問題，你也可以使用

#content { 
     margin:0 25%; 
    }

居中的第二部分。

here's your fiddle updated.正如你可以看到這個小提琴現在一切都集中和響應。

EDIT-2：也許你想添加一些媒體查詢來達到你的目標。

@media screen and (max-width:720px){ 
    #content{width:100%; margin:0px;} 
}

此說，當屏幕達到720下，＃內容的寬度（和每個ID/CLASS，放在那裏）將表現爲宣佈：就在你的CSS文件的末尾添加如下內容。

請注意，@media查詢不是交叉瀏覽器，你可能想添加一個腳本，使他們在每個瀏覽器上工作，我發現respond.js一個很好的工具來完成這項工作。

另請注意，@media查詢必須至少放置在您要在屏幕調整大小時更改的默認屬性下，這就是爲什麼建議將它們添加到css文件的底部。

HERE is another fiddle與媒體應用（只是嘗試調整框中查看效果）

來源

2013-04-15 08:34:14 Yenn

稱爲#content的第二部分在瀏覽器窗口的邊緣到達之前仍會調整大小。我的主要問題是內容框縮小了調整大小，並且只佔用了分配的百分比。我想保持這一點，直到窗口太小，並且被迫響應。 –

我想你應該爲這個添加一些@media查詢。像@ media screen和（max-width：720px）{content {width：100％; margin：0px;} }'將完成這項工作。即時更新我的答案小提琴 – Yenn

謝謝你的建議，但#content元素需要保持相同的寬度，除非瀏覽器窗口強制它調整大小。您的新示例使元素變得異常活躍，並且在移動窗口時仍會調整大小。 –

我不知道這是否是你所尋找的：jsfiddle

我改變了你的包裝，以這樣的：

#wrapper { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -150px; 
    margin-left: -200px; 
    width:400px; 
    height:300px; 
    outline:1px solid red; 
}

讓你的div現在坐在屏幕中間

來源

2013-04-15 08:41:12 Andrew

如果#content元素沒有調整大小，直到瀏覽器窗口的邊緣達到它，這將工作。但是，這是我的主要問題，#content元素正在調整大小，當我想保持它相同，直到它被強制響應的屏幕寬度。 –

然後你需要使用jquery或javascript來改變#wrapper頁面的大小，並仍然顯示在px中，這樣的位置的作品，也改變了餘量，使它正確地坐在中心 – Andrew

是啊，我傾向於JS方式，但我真的想看看是否可以使用CSS來完成。 –

居中流體絕對定位部分

回答

相關問題