CSS：根據屏幕寬度居中float：left元素？

Question

我必須使用浮動div（我的應用程序的主窗口），並且我想根據客戶端的屏幕寬度居中浮動的DIV。我怎麼能做到這一點？

現在我使用的是左：20％，但是這並不總是取決於用戶的屏幕分辨率爲中心

Answer 1

你想在div相對增長到瀏覽器窗口，或者以適應它裏面的內容？

如果前者，您可以使用基於百分比的寬度而不是像素，並且它應該仍然居中。

如果是後者，請不要使用浮點數...首先設置 width:auto;（我認爲應該使其自動展開以適應內容）。然後，您將需要一些JavaScript來測量DIV的寬度，以像素爲單位設置css屬性，然後測量瀏覽器窗口，並根據這些測量值對容器居中。

對不起，我錯了width：auto ;.我想只是浮動它，然後像上面描述的使用JavaScript來手動設置邊距右邊距和左邊距。

---

對不起，想出了一個更好的解決方案。

#float { 
    float:left; 
    margin-left:50%; 
    position:relative; 
} 

然後，使用jQuery，

$(document).ready(function() { 
    var float_width = $('#float').width(); 
    var left_spacing = float_width/2; 

    $('#float').css('left', '-' + left_spacing); 
}); 

原諒我，如果我的JavaScript關閉或完全不是那麼回事......我沒有測試它，我是一個JS小白： ）

Answer 2

你可以嘗試使用

.mainWindow { 
    margin: 0 auto; 
} 

然後確保父元素是文本-居中對齊;

Answer 3

我通常使用一個自動居中的容器div，然後將任何其他容器（如浮動的div）放入該容器中。有什麼特別的理由你不能這樣做嗎？

範例CSS：

#container { 
width: 960px; 
margin: 0 auto; 
position: relative; 
}