横向对齐
方法1:单行块级元素水平居中只用添加text-align即可,如P标签,垂直居中vertical-align只适用于行内元素与单元格,所以设置行高与块高度相同即可
text-align: center;
方法2:普通的文本居中只要设置text-align即可,但是这个设置了P标签的宽度,则是在该宽度内进行居中,则应该设置margin进行居中
.content p
{
width:500px;
font-family: "微软雅黑";
margin: 0 auto;
}
纵向对齐
基本方法:
vertical-align: middle;
设置多行文本元素垂直居中的时候将父元素设置成表格,子元素设置成单元格即可使用vertical
可以在vertical-align中输入正负像素让他进行上下偏移
.content
{
display: table-cell;
vertical-align: middle;
}
竖直对齐的多种方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
p{background-color: #ececec; height: 80px;font-size: 20px;}
span{color:red;font-size: 14px;}
.sub{vertical-align: sub;}
.super{vertical-align: super;}
img{width: 130px;height:40px;}
.baseLine{vertical-align: baseline;}
.top{vertical-align: top;}
.textTop{vertical-align: text-top;}
.middle{vertical-align: middle;}
.textBottom{vertical-align: text-bottom;}
.bottom{vertical-align: bottom;}
td{height:80px; width:100px;}
</style>
</head>
<body>
<b>----sub和super值----</b>
<p>CSS层叠样式表<span class="sub">sub</span></p>
<p class="sub">CSS层叠样式表<span >sub</span></p>
<p>CSS层叠样式表<span class="super">super</span></p>
<b>----baseline、top、text-top、middle、bottom、text-bottom值----</b>
<p>
CSS层叠样式表
<span>(Cascading Style Sheets)</span>
<img src="img/logo.png"/>
</p>
<p>
CSS层叠样式表
<span class="baseLine">基线baseline</span>
<img src="img/logo.png" class="baseLine"/>
</p>
<p>
CSS层叠样式表
<span class="top">顶端对齐top</span>
<img src="img/logo.png"/>
</p>
<p>
CSS层叠样式表
<span class="textTop">文本的顶端对齐textTop</span>
<img src="img/logo.png"/>
</p>
<p>
CSS层叠样式表
<span class="middle">中部对齐middle</span>
<img src="img/logo.png" class="middle"/>
</p>
<p>
CSS层叠样式表
<span class="textBottom">文字底端对齐textBottom</span>
<img src="img/logo.png"/>
</p>
<p>
CSS层叠样式表
<span class="bottom">底端对齐bottom</span>
<img src="img/logo.png" class="bottom"/>
</p>
<b>----长度和百分比的值----</b>
<p>
CSS层叠样式表
<span style="vertical-align:-15px;">长度值</span>
<img src="img/logo.png"/>
</p>
<p style="line-height: 1.5em;">
CSS层叠样式表
<span style="vertical-align:-100%;">百分比值</span>
<img src="img/logo.png"/>
</p>
<b>----应用于单元格元素----</b>
<table border="1px" class="one" cellspacing="0" >
<tr>
<td class="top"><span>top</span></td>
<td class="middle"><span>middle</span></td>
<td class="bottom"><span>bottom</span></td>
</tr>
</table>
</body>
</html>
展示效果: