让⽹页内容⽔平居中的四种⽅法
让⽹页内容⽔平居中的四种⽅法
1.使⽤⾃动外边距
div #container{
margin-left:auto;
margin-right:auto;
width:168px;
}
评：IE6.0以下不⽀持，但是这是最正确、最合理的⼀种⽅法。
2.使⽤text-align
body{
text-align:center;
}
评：这是hack！没有将⽂本属性应⽤在⽂本上同时带来额外⼯作，因为它使body的所有⼦孙元素都居中了，我们不得不再加⼀条 p{text-align:left;} 让⽂本回归默认的居左对齐，另外，真正完全遵循标准的浏览器并不会改变容器的位置，⽽智慧让其中的⽂字居中。但是它却兼容⼤多数浏览器！某些情况下必不可少。
3.组合使⽤⾃动外边距和⽂本对齐
body{
text-align:center;
}
#container{
margin-left:auto;
margin-right:auto;
width:168px;
text-align:left;text align center
}
评：⽂本对齐有很好的向下兼容性，⾃动外边距⽅式也被⼤多数当代浏览器⽀持，所以可以将⼆者结合使⽤。
4.应⽤负外边距
#container{
position:absolute;
left:50%;
width:760px;
margin-left:-380px;
}
评：⾸先将容器绝对定位于相对页⾯左边缘 50% 的位置，这样该容器的左边距将从页⾯ 50% 宽度的位置开始算起，然后将容器的左外边距设置成为负的容器宽度的⼀半！此⽅法适⽤性极⼴----甚⾄在 Netscape Navigator 4.x 中都没问题，所以要想得到最⼴泛的浏览器⽀持，这是最好的选择。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。