hello啊铁子们，今天来给大家浅谈一下css对齐方法与属性
在HTML里面写出的标签 盒子都是向左对齐，可是有时候我们想要让页面更加美观好看，那么我们可以试着改变一下HTML里面的对齐方式，以下介绍几种对齐方式
元素水平居中对齐
最常用的是margin属性，铁汁们都知道，margin属性有四个值 分别是上、右、下、左所以右三种margin方发可以实现元素水平居中对齐
1.margin-left：auto；margin-left：right：auto；
2.margin：auto；
3.margin：0 auto；
<style type="text/css">
.a{
width: 200px;
height: 200px;
background-color: orange;
}
.b{
width: 200px;
height: 200px;
background-color: green;
}
.c{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</body>
分别给他们写上属性：
<style type="text/css">
.a{
width: 200px;
height: 200px;
background-color: orange;
margin-left: auto;
margin-right: auto;
}
.b{
width: 200px;
height: 200px;
background-color: green;
margin: auto;
}
.c{
width: 200px;
height: 200px;
background-color: blue;
margin: 0 auto;
}
</style>
<body>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</body>
文本居中对齐
若只是想让文本居中对齐，则是可以使用text-align：center
<body>
<p style="text-align: center;">我要对齐啦</p>
</body>其中 text-align 还有right、left属性，而且可以直接在行内写出样式，更加的方便
imge 图片居中对齐：
我们知道图片是行内块元素，所以我们需要把图片转成块，但是同样是使用margin属性来对齐
<style type="text/css">
.imge{
display: block;
margin: auto;
}
</style>
<body>
<img class="imge" src="img/%5DIA5CSU%25L~57NY64MLGU9Q8.png" >
</body>左右对齐之定位方法
我们还可以使用position定位的方法来进行左右对齐，这个方法相对要繁琐点不是本推荐，但是还是得来介绍一下：
<style type="text/css">
.position{
position: absolute;
right: 0px;
width: 200px;
border: 2px solid orange;
padding: 20px;
}
</style>
<body>
<div class="position">
看我poistion定位方法
</div>
</body>在这边我们是选择了绝对定位absolute属性，意思是相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
在上面代码里可以发现改变盒子位置的right属性 随着right属性的增大，盒子向左偏移，想要获得准确的位置则是需要不断的调试
注意：当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
左右对齐之float对齐
采用浮动属性进行对齐也是一个不错的选择
<style type="text/css">
.right{
float: right;
width: 200px;
border: 2px solid orange;
padding: 20px;
}
</style>
<body>
<div class="right">
看我float定位方法
</div>
</body>注意：
如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候我们需要使用 "clearfix(清除浮动)" 来解决该问题。
我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:
<style type="text/css">
div{
border: 3px solid red ;
padding: 5px;
}
.clearfix{
overflow: auto;
}
.img{
float: right;
}
</style>
<body>
<div class="clearfix">
<img class="img" width="170px" height="170px" src="img/%5DIA5CSU%25L~57NY64MLGU9Q8.png" >需要清除浮动
</div>
</body>当元素被溢出是可以添加 overflow: auto; 来解决子元素溢出的问题
垂直居中对齐—padding
在css当中也是有很多可以将元素居中对齐的方法，我就来给铁汁们介绍几种垂直居中 的方法
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div {
width: 300px;
height:300px;
border: 3px solid red ;
}
div p {
padding: 150px 0;
}
</style>
<body>
<div >
<p>垂直居中padding方法</p>
</div>
</body>padding方法可以使元素垂直居中，假如想要垂直居中的同时水平居中那么，就需要添加text-align
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div {
width: 300px;
height:300px;
border: 3px solid red ;
}
div p {
padding: 150px 0;
text-align: center;
}
</style>
<body>
<div >
<p>垂直居中padding方法</p>
</div>
</body>Vertical-align 垂直居中
使文本与图片可以垂直居中对齐用户设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div {
width: 300px;
border: 3px solid red ;
line-height: 200px;
text-align: center;
}
div p {
line-height:1.5;
display: inline-block;
vertical-align: middle;
}
</style>
<body>
<div >
<p>垂直居中padding方法</p>
</div>
</body>OK了，铁汁们，css的对齐方法就介绍到这了，这些都是最基本的，铁子们可以灵活的利用对齐方法来达到自己想要的目的，我们下期再见！
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
