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