我试图水平中心一个<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 {
margin-left: auto;
margin-right: auto;
}
最小宽度不是全局支持的，但是可以使用
.divclass {
min-width: 200px;
}
然后可以将div设置为
<div class="center divclass">stuff in here</div>
CSS, HTML: Div.mydiv{宽度:200px;Margin: 0 auto} < div class = " mydiv”> 我在中间 < / div >
您的图表还显示了块级元素(通常是div)，而不是内联元素。
在我的头顶，在FF2+/Safari3+/IE7+中支持min-width。可以在IE6上使用巧妙的CSS，或者简单的JS。
在大多数浏览器，这将工作:
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 >
在非固定宽度的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 >
小提琴
使用jQuery:
$(document).ready(function() {
$(".myElement").wrap( '<span class="myElement_container_new"></span>' ); // for IE6
$(".myElement_container_new").css({// for IE6
"display" : "block",
"position" : "relative",
"margin" : "0",
"padding" : "0",
"border" : "none",
"background-color" : "transparent",
"clear" : "both",
"text-align" : "center"
});
$(".myElement").css({
"display" : "block",
"position" : "relative",
"max-width" : "75%", // for example
"margin-left" : "auto",
"margin-right" : "auto",
"clear" : "both",
"text-align" : "left"
});
});
或者，如果你想用".myElement"类居中每个元素:
$(document).ready(function() {
$(".myElement").each(function() {
$(this).wrap( '<span class="myElement_container_new"></span>' ); // for IE6
$(".myElement_container_new").css({// for IE6
"display" : "block",
"position" : "relative",
"margin" : "0",
"padding" : "0",
"border" : "none",
"background-color" : "transparent",
"clear" : "both",
"text-align" : "center"
});
$(this).css({
"display" : "block",
"position" : "relative",
"max-width" : "75%",
"margin-left" : "auto",
"margin-right" : "auto",
"clear" : "both",
"text-align" : "left"
});
});
});
对这个问题最好的回答是使用margin-auto，但要使用它，你必须知道你的div的宽度在px或%。
CSS代码:
div{
width:30%;
margin-left:auto;
margin-right:auto;
}
如果你的<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>
你应该在父元素上使用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>
问题的标题和内容实际上是不同的，所以我将发布两个解决方案，使用Flexbox。
我猜在IE8和IE9完全被摧毁之前，Flexbox将取代/添加到当前的标准解决方案中;)
检查当前flexbox的浏览器兼容性表
单一的元素
.container { 显示:flex; justify-content:中心; ｝ < div class = "容器" > < img src = " http://placehold.it/100x100 " > < / div >
多个元素，但只以一个为中心
默认行为是flex-direction: row，将所有子项对齐在一行中。将其设置为flex-direction: column将有助于堆叠的行。
.container { display: flex; flex-direction: column; } .centered { align-self: center; } <div class="container"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> <div class="centered"><img src="http://placehold.it/100x100"></div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div>
如果旧浏览器不是问题，可以使用HTML5 / CSS3。如果他们是，应用腻子，仍然使用HTML5 / CSS3。我假设您的div在这里没有边距或填充，但它们相对容易解释。下面是代码。
.centered {
position: relative;
left: 50%;
transform: translateX(-50%);
}
它的作用是:
定位div相对于它的容器; 将div的左边界水平放置在其容器宽度的50%; 水平向后平移div自身宽度的50%。
很容易想象这个确认div最终将水平居中的过程。作为奖励，你可以垂直居中，没有额外的成本:
.centered-vertically {
position: relative;
top: 50%;
transform: translateY(-50%);
}
这种方法的优点是您不必做任何违反直觉的事情，例如将div视为某种文本，将其包装在一个(通常在语义上无用)额外的容器中，或者赋予它一个固定的宽度，这并不总是可能的。
如果需要，不要忘记转换的供应商前缀。
我使用div和span标签以及css属性，如块，跨浏览器内联块和文本对齐中心，见我的简单示例
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.block{display:block;}
.text-center{text-align:center;}
.border-dashed-black{border:1px dashed black;}
.inline-block{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.border-solid-black{border:1px solid black;}
.text-left{text-align:left;}
</style>
</head>
<body>
<div class="block text-center border-dashed-black">
<span class="block text-center">
<span class="block">
<!-- The Div we want to center set any width as long as it is not more than the container-->
<div class="inline-block text-left border-solid-black" style="width:450px !important;">
jjjjjk
</div>
</span>
</span>
</div>
</body>
</html>
在你的html文件中，你写:
<div class="banner">
Center content
</div>
你写的CSS文件:
.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}
对我有用。
margin-left:auto和margin-right:auto的用法在某些情况下可能不起作用。这里有一个解决方案，它总是有效的。您指定一个所需的宽度，然后将左距设置为剩余宽度的一半。
<div style="width:80%; margin-left:calc(10%);">
your_html
</div>
将这个类添加到您的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;
}
九年过去了，我想是时候推出一个新版本了。以下是我最喜欢的两个(现在是一个)。
保证金
将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宽度的一半。
