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

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

其他回答

你可以在CSS上使用margin: 0 auto而不是margin-left: auto;margin-right:汽车;

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

.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

如果旧浏览器不是问题,可以使用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视为某种文本,将其包装在一个(通常在语义上无用)额外的容器中,或者赋予它一个固定的宽度,这并不总是可能的。

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