1、text-align的6种取值
- left:左对齐
- right:右对齐
- center:居中
- start:如果内容方向是左至右,则等于left,反之则为right。
- end:如果内容方向是左至右,则等于right,反之则为left。
- justify:文字向两侧对齐,对最后一行无效。
<!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>
.example_left {
text-align: left;
border: solid;
}
.example_right {
text-align: right;
border: solid;
}
.example_center {
text-align: center;
border: solid;
}
.example_start {
text-align: start;
border: solid;
}
.example_end {
text-align: end;
border: solid;
}
.example_justify {
text-align: justify;
border: solid;
}
</style>
</head>
<body>
<p class="example_left">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
<p class="example_right">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
<p class="example_center">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
<p class="example_start">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
<p class="example_end">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
<p class="example_justify">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
</body>
</html>
结果显示
2、text-align的使用
一般常用的就是文本剧中
上面只是水平剧中,还可以在垂直方向也居中
内部必须是块级元素
上面是内部元素没有宽度高度,如果内部元素也有宽度高度,那么居中方式常用的就是