我试图水平中心一个<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上使用margin: 0 auto而不是margin-left: auto;margin-right:汽车;

其他回答

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

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

    #child {
        display: inline-block;
    }

你应该在父元素上使用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>

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

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 >

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

小提琴

将这个类添加到您的css文件中,它将完美地工作 步骤:

1)先创造它

<div class="center-role-form">
  <!--your div (contrent) place here-->
</div>

2)添加到你的CSS

.center-role-form {
    width: fit-content;
    text-align: center;
    margin: 1em auto;
    display: table;
}