我试图水平中心一个<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的情况下(即你不知道div将占用多少空间)。

#包装{ 背景颜色:绿色;/*用于可视化*/ text-align:中心; } # yourdiv { 背景颜色:红色;/*用于可视化*/ 显示:inline-block; } < div id = "包装" > <div id="yourdiv">你的文本</div> < / div >

请记住,#yourdiv的宽度是动态的->它将增长和缩小以适应其中的文本。

您可以在Caniuse上检查浏览器兼容性

其他回答

margin: 0 auto;

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

如果你的<div>有position: absolute你需要使用width: 100%;

#parent {
    width: 100%;
    text-align: center;
}

    #child {
        display: inline-block;
    }
.center {
   margin-left: auto;
   margin-right: auto;
}

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

.divclass {
   min-width: 200px;
}

然后可以将div设置为

<div class="center divclass">stuff in here</div>

在你的html文件中,你写:

<div class="banner">
  Center content
</div>

你写的CSS文件:

.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}

对我有用。

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

CSS代码:

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