我试图水平中心一个<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
当前回答
.center { 高度:20 px; 背景颜色:蓝色; ｝ .center > div { 保证金:汽车; 背景颜色:绿色; 宽度:200 px; ｝ < div class = "中心" > < / div > < div >你文本 < / 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的情况下(即你不知道div将占用多少空间)。
#包装{ 背景颜色:绿色;/*用于可视化*/ text-align:中心; ｝ # yourdiv { 背景颜色:红色;/*用于可视化*/ 显示:inline-block; ｝ < div id = "包装" > <div id="yourdiv">你的文本</div> < / div >
请记住，#yourdiv的宽度是动态的->它将增长和缩小以适应其中的文本。
您可以在Caniuse上检查浏览器兼容性
.center { 高度:20 px; 背景颜色:蓝色; ｝ .center > div { 保证金:汽车; 背景颜色:绿色; 宽度:200 px; ｝ < div class = "中心" > < / div > < div >你文本 < / div >
小提琴
请使用下面的代码，您的div将在中心。
.class-name {
display:block;
margin:0 auto;
}
如果你的<div>有position: absolute你需要使用width: 100%;
#parent {
width: 100%;
text-align: center;
}
#child {
display: inline-block;
}
