我试图水平中心一个<div>块元素在页面上，并将其设置为最小宽度。最简单的方法是什么?我想要<div>元素内联与我的页面的其余部分。我来举个例子:
page text page text page text page text
page text page text page text page text
-------
| div |
-------
page text page text page text page text
page text page text page text page text
当前回答
在大多数浏览器，这将工作:
div.centre { 宽度:200 px; 显示:块; background - color: # eee; margin-left:汽车; margin-right:汽车; ｝ <div class=" center ">一些文本</div>
在IE6中，你需要添加另一个外部div:
div.layout { text-align:中心; ｝ div.centre { text-align:左; 宽度:200 px; background - color: # eee; 显示:块; margin-left:汽车; margin-right:汽车; ｝ < div class = "布局”> <div class=" center ">一些文本</div> < / div >
其他回答
九年过去了，我想是时候推出一个新版本了。以下是我最喜欢的两个(现在是一个)。
保证金
将margin设置为auto。你要知道方向序列是边距:*上* *右* *下* *左*;或边距:*上下*左右*
aside{ display: block; width: 50px; height: 100px; background-color: green; float: left; } article{ height: 100px; margin: 0 0 0 50px; /* 50px aside width */ background-color: grey; } div{ margin: 0 auto; display:block; width: 60px; height: 60px; background-color: blue; color: white; } <!DOCTYPE html> <html> <head> </head> <body> <aside> </aside> <article> <div>The div</div> </article> </body> </html>
中心:废弃的，不要用这个!
使用<center></center>标签环绕<div></div>。
例子:
aside{ display:block; background-color:green; width: 50px; height: 100px; float: left; } center{ display:block; background-color:grey; height: 100px; margin-left: 50px; /* Width of the aside */ } div{ display:block; width: 60px; height: 60px; background-color:blue; color: white; } <!DOCTYPE html> <html> <head> </head> <body> <aside> </aside> <article> <center> <div>The div</div> </center> </article> </body> </html>
在大多数浏览器，这将工作:
div.centre { 宽度:200 px; 显示:块; background - color: # eee; margin-left:汽车; margin-right:汽车; ｝ <div class=" center ">一些文本</div>
在IE6中，你需要添加另一个外部div:
div.layout { text-align:中心; ｝ div.centre { text-align:左; 宽度:200 px; background - color: # eee; 显示:块; margin-left:汽车; margin-right:汽车; ｝ < div class = "布局”> <div class=" center ">一些文本</div> < / div >
CSS, HTML: Div.mydiv{宽度:200px;Margin: 0 auto} < div class = " mydiv”> 我在中间 < / div >
您的图表还显示了块级元素(通常是div)，而不是内联元素。
在我的头顶，在FF2+/Safari3+/IE7+中支持min-width。可以在IE6上使用巧妙的CSS，或者简单的JS。
如果旧浏览器不是问题，可以使用HTML5 / CSS3。如果他们是，应用腻子，仍然使用HTML5 / CSS3。我假设您的div在这里没有边距或填充，但它们相对容易解释。下面是代码。
.centered {
position: relative;
left: 50%;
transform: translateX(-50%);
}
它的作用是:
定位div相对于它的容器; 将div的左边界水平放置在其容器宽度的50%; 水平向后平移div自身宽度的50%。
很容易想象这个确认div最终将水平居中的过程。作为奖励，你可以垂直居中，没有额外的成本:
.centered-vertically {
position: relative;
top: 50%;
transform: translateY(-50%);
}
这种方法的优点是您不必做任何违反直觉的事情，例如将div视为某种文本，将其包装在一个(通常在语义上无用)额外的容器中，或者赋予它一个固定的宽度，这并不总是可能的。
如果需要，不要忘记转换的供应商前缀。
margin-left:auto和margin-right:auto的用法在某些情况下可能不起作用。这里有一个解决方案，它总是有效的。您指定一个所需的宽度，然后将左距设置为剩余宽度的一半。
<div style="width:80%; margin-left:calc(10%);">
your_html
</div>
