我试图水平中心一个<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
当前回答
你应该在父元素上使用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>
其他回答
在你的html文件中，你写:
<div class="banner">
Center content
</div>
你写的CSS文件:
.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}
对我有用。
CSS, HTML: Div.mydiv{宽度:200px;Margin: 0 auto} < div class = " mydiv”> 我在中间 < / div >
您的图表还显示了块级元素(通常是div)，而不是内联元素。
在我的头顶，在FF2+/Safari3+/IE7+中支持min-width。可以在IE6上使用巧妙的CSS，或者简单的JS。
你应该在父元素上使用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>
对这个问题最好的回答是使用margin-auto，但要使用它，你必须知道你的div的宽度在px或%。
CSS代码:
div{
width:30%;
margin-left:auto;
margin-right:auto;
}
在非固定宽度的div的情况下(即你不知道div将占用多少空间)。
#包装{ 背景颜色:绿色;/*用于可视化*/ text-align:中心; ｝ # yourdiv { 背景颜色:红色;/*用于可视化*/ 显示:inline-block; ｝ < div id = "包装" > <div id="yourdiv">你的文本</div> < / div >
请记住，#yourdiv的宽度是动态的->它将增长和缩小以适应其中的文本。
您可以在Caniuse上检查浏览器兼容性
