我试图水平中心一个<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
当前回答
你可以使用位置:相对;然后设置左边和上面的值:
.cenverDiv{
position:relative;
left:30%;
top:0px;
}
其他回答
如果你知道你的div的宽度并且它是固定的，你可以使用下面的css:
margin-left: calc(50% - 'half-of-your-div-width');
'half-of-your-div-width'显然应该是div宽度的一半。
这里我添加了正确的答案
您可以使用此片段代码并进行自定义。这里我使用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>
在大多数浏览器，这将工作:
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 {
margin-left: auto;
margin-right: auto;
}
最小宽度不是全局支持的，但是可以使用
.divclass {
min-width: 200px;
}
然后可以将div设置为
<div class="center divclass">stuff in here</div>
你应该在父元素上使用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>
