父元素：text-align:center;
div子元素：marign:0px auto;
通过在当前元素使用margin:0px auto可以实现当前元素在父元素中的水平居中效果。
通常情况下text-align:center是用作将文本水平居中的，如果让一个div水平居中，一般要使用margin:0px auto这段代码，这个对于有开发经验的前端人员没有任何问题，但初学者往往会出现使用text-align:center来实现div水平居中的情况，并且还会得出这样的结论:有的浏览器可以有的浏览器不可以。下面就看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>为什么text-align:center无法将div水平居中-蚂蚁部落</title>
<style type="text/css">
div{
width:200px;
height:200px;
background-color:green;
text-align:center;
}
#children{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div style="text-align:center;">
<div id="children"></div>
</div>
</body>
</html>
以上代码的初衷是想让子元素在父元素中水平居中，这个在IE7和IE7以下浏览器中是可以的，但是在IE8和和IE8以浏览器或者其他标准浏览器中是没有任何效果的。text-align:center一般是用来规定文本和内联元素的水平居中对齐，如果想要让块级水平居中对齐，一般使用margin:0px auto来实现，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>为什么text-align:center无法将div水平居中-蚂蚁部落</title>
<style type="text/css">
div{
width:200px;
height:200px;
background-color:green;
}
#children{
width:100px;
height:100px;
background-color:red;
margin:0px auto;
}
</style>
</head>
<body>
<div style="text-align:center;">
<div id="children"></div>
</div>
</body>
</html>
以上代码通过在当前元素使用margin:0px auto可以实现当前元素在父元素中的水平居中效果。
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
