(一)属性文本:
text-align: left;
(1).left ( 默认:left )
(2).center
(3).right
(二) 单行文本:
line-height: 16px;
垂直居中的一个方法:单行文本高度=容器高度,此时文本内容就会居中
示例:
<!DOCTYPE html>
<html>
<head>
<!-- 编码字符集charset -->
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div{
width: 300px;
height: 50px;
border: 1px solid black;
/*border-left: 10px solid black;*/
/*border-left-width: 10px;*/
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<br>
<br>
<br>
<div>中国北京上海</div>
</body>
</html>
示例效果:
(三)首行缩进
text-indent: 1em;
(1)绝对单位:m(米)
(2)相对单位:px(像素) em 等
1em=1*1font-size=16px 等于他自己的fontsize
效果:
代码示例:
<!DOCTYPE html>
<html>
<head>
<!-- 编码字符集charset -->
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div{
font-size: 16px;
width: 300px;
height: 200px;
border: 1px solid black;
/*border-left: 10px solid black;*/
/*border-left-width: 10px;*/
text-align: left;
line-height: 20px;
text-indent: 2em;
/*首行缩进*/
}
</style>
</head>
<body>
<br>
<br>
<br>
<div>中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海中国北京上海</div>
</body>
</html>