在CSS中,我们可以使用各种方法和技术来使对齐项目,例可以水平和垂直对齐项目。下面本篇文章就来给大家介绍一些使用CSS对齐项目的方法,希望对大家有所帮助。
1、margin : auto ;
此属性用于将块元素水平对齐到中心。
示例:
.box{
width: 100%;
height: 150px;
border: 3px solid #73AD21;
}
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
元素居中对齐
这是一个div元素,在这个元素上,margin:auto用于将其水平对齐到中心。
注意:使用margin : auto在IE8中不起作用,除非声明了!DOCTYPE。
效果图:
2、position: absolute;
我们可以使用position: absolute;来对齐项目。
示例:
.box{
width: 100%;
height: 150px;
border: 3px solid #73AD21;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
右对齐
绝对定位元素可以与其他元素重叠。
效果图:
3、text-align: center;
我们可以在各种标签中使用text-align: center;它可以将任何用HTML编写的文本对齐。
示例:
.box{
width: 100%;
height: 200px;
border: 3px solid #73AD21;
}
.center {
text-align: center;
border: 3px solid green;
}
Hello World!
两个文本都在中间
这是一个居中文本!
效果图:
4、line-height属性
想要垂直对齐项目,我们可以使用line-height属性。line-height 属性设置行间的距离(行高)。
示例:
.center {
width: 60%;
height: 150px;
border: 3px solid green;
line-height: 150px;
}
一段垂直居中的文本!
效果图:
5、padding和text-align属性
我们可以使用padding属性和text-align : center的组合来垂直和水平对齐文本。
示例:
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
使用padding和text-align将div元素里的内容垂直和水平居中:
这是一段垂直水平居中的文本。
效果图: