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

这里我添加了正确的答案

您可以使用此片段代码并进行自定义。这里我使用2个子块。这应该显示页面的中心。 您可以使用一个或多个块。

<html>
<head>
<style>
#parent {
    width: 100%;
    border: solid 1px #aaa;
    text-align: center;
    font-size: 20px;
    letter-spacing: 35px;
    white-space: nowrap;
    line-height: 12px;
    overflow: hidden;
}

.child {
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>

<body>

<div class="mydiv" id="parent">


<div class="child">
Block 1
</div>
<div class="child">
Block 2
</div>

</div>
</body>
</html>
.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

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

CSS代码:

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