css - 你如何轻松地 CSS水平中心定位<div>?

  显示原文与译文双语对照的内容

试图将 <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

时间:

在大多数浏览器中,这将工作。

磅样式表


div.centre
{
 width: 200px;
 display: block;
 margin-left: auto;
 margin-right: auto;
}

HTML


<div class="centre">Some Text</div>

在IE6中,你需要添加另一个外部 div 。。

磅样式表


div.layout
{
 text-align: center;
}
div.centre
{
 text-align: left;
 width: 200px;
 display: block;
 margin-left: auto;
 margin-right: auto;
}

HTML


<div class="layout">
 <div class="centre">Some Text</div>
</div>

在non-fixed宽度div的情况下( IE 。 你不知道这个div将使用多少空间。


<div id="wrapper" style="text-align: center"> 
 <div id="yourdiv" style="display: inline-block;">You text</div>
</div>

在最新的Chrome ( 19.0.108 4.52 ),safari 5.1和 Firefox 12中测试。 我不知道 IE 。

注意:记住 #yourdiv的宽度是动态的-> 会增长并缩小以容纳它里面的文本。

NOTE2: 你可以在这里检查浏览器兼容性-> http://caniuse.com/inline-block

NOTE3: 根据一些用户的说法,它似乎在最新的IE 中运行

最小回答

样式表


div.mydiv {width: 200px; margin:0px auto}

HTML


<div class="mydiv">

I am in the middle

</div>

你的图表显示了块级别元素,而不是( 通常是哪个 div ) 。

在我的头脑中,min-width的支持在 ff2+/safari3+/ie7+. 可以用 hackety css或者简单的JS来完成。


.center {
 margin-left: auto;
 margin-right: auto;
}

最小宽度不受全局支持,但可以使用


.divclass {
 min-width: 200px;
}

然后你可以将你的div设置为


<div class="center divclass">stuff in here</div>

在这里我添加正确的答案

你可以使用这里代码段代码并自定义。 这里我使用 2个子 block.This 应该显示页面中心。 你可以使用一个或者多个块。


<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>

使用 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"
 });
 });
});

...