我试图水平中心一个<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文件中,它将完美地工作 步骤:

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;
}

其他回答

将这个类添加到您的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;
}

你可以使用位置:相对;然后设置左边和上面的值:

.cenverDiv{
    position:relative;
    left:30%;
    top:0px;
}

如果旧浏览器不是问题,可以使用HTML5 / CSS3。如果他们是,应用腻子,仍然使用HTML5 / CSS3。我假设您的div在这里没有边距或填充,但它们相对容易解释。下面是代码。

.centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

它的作用是:

定位div相对于它的容器; 将div的左边界水平放置在其容器宽度的50%; 水平向后平移div自身宽度的50%。

很容易想象这个确认div最终将水平居中的过程。作为奖励,你可以垂直居中,没有额外的成本:

.centered-vertically {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

这种方法的优点是您不必做任何违反直觉的事情,例如将div视为某种文本,将其包装在一个(通常在语义上无用)额外的容器中,或者赋予它一个固定的宽度,这并不总是可能的。

如果需要,不要忘记转换的供应商前缀。

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

小提琴

在非固定宽度的div的情况下(即你不知道div将占用多少空间)。

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

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

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