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

当前回答

margin-left:auto和margin-right:auto的用法在某些情况下可能不起作用。这里有一个解决方案,它总是有效的。您指定一个所需的宽度,然后将左距设置为剩余宽度的一半。

    <div style="width:80%; margin-left:calc(10%);">
        your_html
    </div>

其他回答

.center {
   margin-left: auto;
   margin-right: auto;
}

最小宽度不是全局支持的,但是可以使用

.divclass {
   min-width: 200px;
}

然后可以将div设置为

<div class="center divclass">stuff in here</div>
margin: 0 auto;

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

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

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

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

在大多数浏览器,这将工作:

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 >

请使用下面的代码,您的div将在中心。

.class-name {
    display:block;
    margin:0 auto;
}