我试图水平中心一个<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

当前回答

你应该在父元素上使用position: relative和text-align: center,然后在你想居中的子元素上使用display: inline-block。这是一个简单的CSS设计模式,适用于所有主流浏览器。下面是一个示例或查看CodePen示例。

p { text-align: left; } .container { position: relative; display: block; text-align: center; } /* Style your object */ .object { padding: 10px; color: #ffffff; background-color: #556270; } .centerthis { display: inline-block; } <div class="container"> <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p> <span class="object centerthis">Something Centered</span> <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p> </div>

其他回答

对这个问题最好的回答是使用margin-auto,但要使用它,你必须知道你的div的宽度在px或%。

CSS代码:

div{
    width:30%;
    margin-left:auto;
    margin-right:auto;
}

CSS, HTML: Div.mydiv{宽度:200px;Margin: 0 auto} < div class = " mydiv”> 我在中间 < / div >

您的图表还显示了块级元素(通常是div),而不是内联元素。

在我的头顶,在FF2+/Safari3+/IE7+中支持min-width。可以在IE6上使用巧妙的CSS,或者简单的JS。

margin: 0 auto;

正如ck所说,不是所有浏览器都支持min-width

.center { 高度:20 px; 背景颜色:蓝色; } .center > div { 保证金:汽车; 背景颜色:绿色; 宽度:200 px; } < div class = "中心" > < / div > < div >你文本 < / div >

小提琴

如果你知道你的div的宽度并且它是固定的,你可以使用下面的css:

margin-left: calc(50% - 'half-of-your-div-width');

'half-of-your-div-width'显然应该是div宽度的一半。