介绍三个和行相关的属性。
line-height
定义行高，即行的高度，数值单位用px、字号倍数、百分比表示。
<!--方式一 属性单位 为px-->
<style>
p {
line-height:30px
}
</style>
<!--方式二 不带单位，表示字号的倍数-->
<style>
p {
line-height: 1.5
}
</style>
<!--方式三 百分号， 表示 原字号的百分比（倍数）-->
<style>
p {
line-height: 150%
}
</style>
垂直居中
有一种垂直居中的方式就是用行高等于盒子高。
<!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>这是标题</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: red;
line-height: 300px;
}
</style>
</head>
<body>
<div class="box">
<p>文字</p>
</div>
</body>
</html>
text-align
文本的水平对齐方式
| 值 | 意思 |
|---|---|
| left | 左边对齐 |
| right | 有段对齐 |
| center | 水平居中 |
<style>
p {
width: 1100px;
}
.aleft {
text-align: left;
}
.aright {
text-align: right;
}
.acenter {
text-align: center;
}
</style>
<body>
<p class="aleft">左端对齐</p>
<p class="aright">右端对齐</p>
<!-- 开发过程中通常可以用text-align实现水平居中-->
<p class="acenter">水平居中</p>
</body>
一个实现垂直和水平居中的例子
垂直方向：行高等于盒子高。
水平方向：文字的text-align属性为center。
<!--文字垂直和水平都居中-->
<!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>这是标题</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: red;
line-height: 300px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<p>文字</p>
</div>
</body>
</html>
text-indent
文本和内容的缩进量。
/**
em 表示缩进宽度
*/
text-indent: 2em;
<!--测试-->
<!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>这是标题</title>
<style>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<div>
<p>该梗出自B站评论区，出自up主“那就叫王师傅吧”和“旅途船长”的视频，看起来说了一堆话却好像什么意思也没有表达。网友纷纷表示：“听君一席话，如听一席话。”就是听了半天一堆废话。该梗出自B站评论区，出自up主“那就叫王师傅吧”和“旅途船长”的视频，看起来说了一堆话却好像什么意思也没有表达。网友纷纷表示：“听君一席话，如听一席话。”就是听了半天一堆废话。该梗出自B站评论区，出自up主“那就叫王师傅吧”和“旅途船长”的视频，看起来说了一堆话却好像什么意思也没有表达。网友纷纷表示：“听君一席话，如听一席话。”就是听了半天一堆废话。该梗出自B站评论区，出自up主“那就叫王师傅吧”和“旅途船长”的视频，看起来说了一堆话却好像什么意思也没有表达。网友纷纷表示：“听君一席话，如听一席话。”就是听了半天一堆废话。</p>
<p>该梗出自B站评论区，出自up主“那就叫王师傅吧”和“旅途船长”的视频，看起来说了一堆话却好像什么意思也没有表达。网友纷纷表示：“听君一席话，如听一席话。”就是听了半天一堆废话。该梗出自B站评论区，出自up主“那就叫王师傅吧”和“旅途船长”的视频，看起来说了一堆话却好像什么意思也没有表达。网友纷纷表示：“听君一席话，如听一席话。”就是听了半天一堆废话。该梗出自B站评论区，出自up主“那就叫王师傅吧”和“旅途船长”的视频，看起来说了一堆话却好像什么意思也没有表达。网友纷纷表示：“听君一席话，如听一席话。”就是听了半天一堆废话。该梗出自B站评论区，出自up主“那就叫王师傅吧”和“旅途船长”的视频，看起来说了一堆话却好像什么意思也没有表达。网友纷纷表示：“听君一席话，如听一席话。”就是听了半天一堆废话。该梗出自B站评论区，出自up主“那就叫王师傅吧”和“旅途船长”的视频，看起来说了一堆话却好像什么意思也没有表达。网友纷纷表示：“听君一席话，如听一席话。”就是听了半天一堆废话。</p>
</div>
</body>
</html>