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

当前回答

这里我添加了正确的答案

您可以使用此片段代码并进行自定义。这里我使用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>

其他回答

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

CSS代码:

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

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

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

九年过去了,我想是时候推出一个新版本了。以下是我最喜欢的两个(现在是一个)。

保证金

将margin设置为auto。你要知道方向序列是边距:*上* *右* *下* *左*;或边距:*上下*左右*

aside{ display: block; width: 50px; height: 100px; background-color: green; float: left; } article{ height: 100px; margin: 0 0 0 50px; /* 50px aside width */ background-color: grey; } div{ margin: 0 auto; display:block; width: 60px; height: 60px; background-color: blue; color: white; } <!DOCTYPE html> <html> <head> </head> <body> <aside> </aside> <article> <div>The div</div> </article> </body> </html>

中心:废弃的,不要用这个!

使用<center></center>标签环绕<div></div>。

例子:

aside{ display:block; background-color:green; width: 50px; height: 100px; float: left; } center{ display:block; background-color:grey; height: 100px; margin-left: 50px; /* Width of the aside */ } div{ display:block; width: 60px; height: 60px; background-color:blue; color: white; } <!DOCTYPE html> <html> <head> </head> <body> <aside> </aside> <article> <center> <div>The div</div> </center> </article> </body> </html>

如果你知道你的div的宽度并且它是固定的,你可以使用下面的css:

margin-left: calc(50% - 'half-of-your-div-width');

'half-of-your-div-width'显然应该是div宽度的一半。

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

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

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

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