您如何使用CSS轻松地将
我正在尝试将<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
第1818篇《您如何使用CSS轻松地将
you can use the position:relative; and then set the left and the top values:
.cenverDiv{
position:relative;
left:30%;
top:0px;
}
The best response to this question is to use margin-auto but for using it you must know the width of your div in px or %.
CSS code:
div{
width:30%;
margin-left:auto;
margin-right:auto;
}
Usage of margin-left:auto and margin-right:auto may not work in certain situations. Here is a solution what will always work. You specify a required width and than set a left-margin to a half of the remaining width.
<div style="width:80%; margin-left:calc(10%);">
your_html
</div>
在您的html文件中，您可以编写：
<div class="banner">
Center content
</div>
您编写的CSS文件：
.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}
为我工作。
将此类添加到您的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;
}
如果您<div>有position: absolute，则需要使用width: 100%;
#parent {
width: 100%;
text-align: center;
}
#child {
display: inline-block;
}
在这里我添加适当的答案
您可以使用此代码段并进行自定义。这里我使用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 {
height: 20px;
background-color: blue;
}
.center>div {
margin: auto;
background-color: green;
width: 200px;
}<div class="center">
<div>You text</div>
</div>您可以margin: 0 auto在CSS上使用，而不是margin-left: auto; margin-right: auto;
请使用以下代码，您的div将位于中间。
.class-name {
display:block;
margin:0 auto;
}
九年后，我认为是时候推出新版本了。这是我的两个（现在是一个）收藏夹。
余量
设置margin到auto。你应该知道的方向顺序margin: *top* *right* *bottom* *left*;或margin: *top&bottom* *left&right*
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>您应该使用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>.center {
margin-left: auto;
margin-right: auto;
}
全局不支持最小宽度，但是可以使用
.divclass {
min-width: 200px;
}
然后您可以将div设置为
<div class="center divclass">stuff in here</div>
CSS，HTML：
div.mydiv {width: 200px; margin: 0 auto}<div class="mydiv">
I am in the middle
</div>您的图表还显示了一个块级元素（通常是div），而不是内联元素。
我的头顶部，min-width在FF2 + / Safari3 + / IE7 +支持。可以使用笨拙的CSS或简单的JS为IE6完成。
如果旧的浏览器不是问题，请使用HTML5 / CSS3。如果是这样，请应用polyfills并仍使用HTML5 / CSS3。我假设您的div在这里没有边距或填充，但是它们相对容易解释。代码如下。
.centered {
position: relative;
left: 50%;
transform: translateX(-50%);
}
这是什么：
div相对于其容器定位；div的左边界水平放置在其容器宽度的 50％处；div自身宽度。可以想象这个过程可以确认div最终会水平居中。作为奖励，您可以免费垂直居中：
.centered-vertically {
position: relative;
top: 50%;
transform: translateY(-50%);
}
这种方法的优点是您不必做任何违反直觉的事情，例如将div视为各种文本，将其包装在（通常在语义上无用的）附加容器中，或者给其固定宽度，这不是总是可能的。
transform如果需要，不要忘记供应商前缀。
在大多数浏览器中，这将起作用：
div.centre {
width: 200px;
display: block;
background-color: #eee;
margin-left: auto;
margin-right: auto;
}<div class="centre">Some Text</div>在IE6中，您需要添加其他外部元素div：
div.layout {
text-align: center;
}
div.centre {
text-align: left;
width: 200px;
background-color: #eee;
display: block;
margin-left: auto;
margin-right: auto;
}<div class="layout">
<div class="centre">Some Text</div>
</div>对于非固定宽度的 div（即，您不知道div将占用多少空间）。
#wrapper {
background-color: green; /* for visualization purposes */
text-align: center;
}
#yourdiv {
background-color: red; /* for visualization purposes */
display: inline-block;
}<div id="wrapper">
<div id="yourdiv">Your text</div>
</div>请记住，的宽度#yourdiv是动态的->它会增长和缩小以适应其中的文本。
您可以在Caniuse上检查浏览器的兼容性
相似问题
问题类别
I use div and span tags together with css properties such as block, cross-browser inline-block and text-align center, see my simple example