鲁达 上午说了CSS字体的颜色属性，下午来说下字体的文本对齐text-align和文本装饰text-decoration
text-align属性用于设置元素内文本内容的水平对齐方式。语法规则如下:
div {
text-align:center;
}
除了有center属性外，还有另外两个属性:
left 左对齐(默认值)
right 右对齐
先看下居中效果:
对应代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
</body>
</html>
然后是文案左对齐，看下效果:
对应代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
text-align: left;
}
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
</body>
</html>
最后是右对齐，看下效果:
对应的代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
text-align: right;
}
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
</body>
</html>
如果不写文字对齐的属性，看下默认应该都是左对齐，效果如下:
对应代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div {
text-align: right;
} */
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
</body>
</html>
可以看到已经将text-align代码注释掉了，默认展示就是左对齐
今天先到这里，大家学习工作辛苦了~