[英]How can I center a box of unknown width in CSS?
我有這個HTML：
<div class="object-box">
<img ... />
<span class="caption">This is the caption</span>
</div>
這附帶了這個CSS：
.object-box .caption, .object-box img {
display: block;
}
.object-box {
border: 1px solid;
}
我希望周圍的div收縮包裝到它的內容。 我可以通過使用float: ...或display: inline-block來實現這一點。 但是，我也希望它以頁面為中心，使用margin: auto 。 這兩種方法似乎不兼容。
是否可以在不添加包裝元素的情況下創建這種收縮包裝的中心容器？
jsFiddle 在這里
<!doctype html>
<html>
<head>
<title>ugh</title>
<style>
div#not-floated {
display:table;
margin:0 auto;
}
div#floated {
float:right;
position:relative;
right:50%;
}
div#floated-inner {
float:left;
position:relative;
left:50%;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#container { text-align: center; }
#container * { text-align: left; }
div#not-floated {
zoom: 1;
display: inline;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="not-floated">
<img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg"><br>
ok.
</div>
</div>
<div id="floated-container">
<div id="floated"><div id="floated-inner">
<img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg">
</div></div>
</div>
</body>
</html>
簡單的解釋是.. display:table; 導致它在現代瀏覽器中收縮包裝，這是在現代瀏覽器中使用margin：0 auto中心無寬度塊級別的唯一方法; 。
在IE中，使用父元素在收縮包裝display:inline上設置text-align：center display:inline塊級元素。
對於浮動，它只使用容器進行IE的50％數學運算。
幾個月后才開始吵鬧。 將未知寬度的div居中是一個常見問題，因此您可能希望創建一個可重復使用的解決方案。
包含您想要居中的未知寬度的div的HTML：
<div class="centered-block-outer">
<div class="centered-block-middle">
<div class="centered-block-inner">
<!-- div that you'd like to center goes here -->
</div>
</div>
</div>
CSS：
/* To center a block-level element of unknown width */
.centered-block-outer {
overflow: hidden;
position: relative;/* ie7 needs position:relative here*/
}
.centered-block-middle {
float: left;
position:relative;
left:50%;
}
.centered-block-inner {
position:relative;
left:-50%;
}
其原因在此解釋： http ： //www.tightcss.com/centering/center_variable_width.htm
令人討厭的部分是你必須創建三個div才能使它工作 - css真的應該提供更好的方法。 但最重要的是，此解決方案適用於跨瀏覽器和整個站點。
祝好運！
div標簽似乎不起作用; 但是，span標簽會縮小以適應。 希望代碼解釋自己。 我還添加了幾個對齊方式。
<html>
<head>
<title>TEST!</title>
<style type="text/css">
.object-box-wrapper{width:100%;text-align:center;}
.object-box {
border: 1px solid;
text-align:left;
}
</style>
</head>
<body>
<div class="object-box-wrapper">
<span class="object-box">
<span class="caption">This is the caption</span>
</span>
</div>
</body>
</html>
CSS現在有一個叫做flex布局的東西，到目前為止我的使用有限，它的效果非常好。
https://www.w3.org/TR/css-flexbox-1/
嘗試這些方面的東西：
<html>
<head>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}
.object-box {
border: 1px solid;
}
</style>
</head>
<body>
<div class="object-box">
<img ... />
<span class="caption">This is the caption</span>
</div>
</body>
</html>
這應該是有用的
HTML：
<msgbox>
<p>
foo
</p>
</msgbox>
和CSS：
msgbox {
width: 100%;
display: block;
text-align: center;
}
p {
display: inline-block;
}
...唯一可悲的是，msgbox元素，當使用絕對位置時，阻止點擊它（但這只是一個相關的問題，可能不適合你）
我知道在沒有javascript的情況下執行此操作的唯一方法是將div設置為position:absolute和left:50% 。
我必須為jQuery照片庫做這個...我最終做的是當選擇了一張照片時，當前的照片會淡出並且會加載新照片，然后計算容器一半寬度的差異減去照片寬度的一半。 然后我會用該值設置margin-left（和margin-top垂直）。
thewidth = $('#thephoto').width();
theheight = $('#thephoto').height();
$('#thephoto').css("margin-top",250-(theheight/2));
$('#thephoto').css("margin-left",287.5-(thewidth/2));
$('#thephoto').fadeIn(300);
這是我的Flash背景真的派上用場:)
如何將長度未知的div水平居中並使用最小寬度？
[英]How can I horizontally center a div with unknown length and use min-width?
當另一個元素在其旁邊浮動時，如何將未知寬度的元素水平居中（居中）？
[英]How can I horizontally centre (center) an element of unknown width when another element is floated next to it?
當寬度未知時，如何為Java幻燈片放映的圖像居中？
[英]How do I Center Images for a Javascript Slideshow when the width is unknown?
如何在 Flutter 中將內容容器居中，就像 CSS 中的“最大寬度”容器一樣？
[英]How can I center a content container in Flutter like a "max-width" container in CSS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.