CSS为网页设计带来了全新的布局方法。
而div标签是CSS布局的主力元素,其优势非常明显,相对于表格布局,div更加灵活。
div标签就是没有任何特性的容器,属于块状元素。
通常使用html布局表格布局页面时。只要设置布局表格的align属性为center就可以实现水平居中的效果了,但是div没有数据属性可以设置,只能通过CSS控制。
实现div水平居中的方法有很多,常用的方法是用CSS设置div的左右边距,即margin-left属性、margin-right属性。
当设置div左右外边距的值为auto,即自动时,左右外边距将相等,这样就达到了div水平居中的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div布局水平居中</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#align {
width: 75%;
height: 200px;
background-color: #999999;
border: 1px solid #000;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="align">
这是div块,水平居中效果
</div>
</body>
</html>
网友评论