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

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

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

2009-10-22 Albert

這需要更多的解釋。無論是浮動還是居中（即佈局的一部分）。居中是微不足道的：0自動。爲什麼它需要成爲一個浮動？ – cletus 2009-10-22 17:38:30

如果我不漂浮我正在使用的容器，它將不會自動擴展並隨其內容一起增長......但同時，我希望該容器以顯示器 – Albert 2009-10-22 18:04:46

你想在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小白：）

來源

2009-10-22 20:13:03

你可以嘗試使用

.mainWindow { 
    margin: 0 auto; 
}

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

來源

2009-10-22 17:35:55 jkelley

'text- align：center'在現代瀏覽器中無法使用居中元素。只有文字。 – Jason 2009-10-22 20:16:18

@Jason這不完全正確;如果將元素的「display」設置爲「inline-block」或「inline」，則其行爲與文本相同。 – 2009-10-22 22:24:49

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

範例CSS：

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

來源

2009-10-22 17:36:19

是的，我不能在任何容器上使用靜態寬度...這就是爲什麼我使用float：left元素，所以DIV可以自動增長。因此，如果我使用外置中心容器，它將不得不隨着內部分區一起增長 – Albert 2009-10-22 17:53:34

有趣的需求，我從來沒有聽說過以前的任何事情。 – 2009-10-22 21:38:49

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

回答

相關問題