我试图水平中心一个<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
当前回答
CSS, HTML: Div.mydiv{宽度:200px;Margin: 0 auto} < div class = " mydiv”> 我在中间 < / div >
您的图表还显示了块级元素(通常是div)，而不是内联元素。
在我的头顶，在FF2+/Safari3+/IE7+中支持min-width。可以在IE6上使用巧妙的CSS，或者简单的JS。
其他回答
你可以使用位置:相对;然后设置左边和上面的值:
.cenverDiv{
position:relative;
left:30%;
top:0px;
}
在非固定宽度的div的情况下(即你不知道div将占用多少空间)。
#包装{ 背景颜色:绿色;/*用于可视化*/ text-align:中心; ｝ # yourdiv { 背景颜色:红色;/*用于可视化*/ 显示:inline-block; ｝ < div id = "包装" > <div id="yourdiv">你的文本</div> < / div >
请记住，#yourdiv的宽度是动态的->它将增长和缩小以适应其中的文本。
您可以在Caniuse上检查浏览器兼容性
如果你知道你的div的宽度并且它是固定的，你可以使用下面的css:
margin-left: calc(50% - 'half-of-your-div-width');
'half-of-your-div-width'显然应该是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>
在你的html文件中，你写:
<div class="banner">
Center content
</div>
你写的CSS文件:
.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}
对我有用。
