CSS text-indent 文字缩进效果

作者: Devops海洋的渔夫 | 来源:发表于2019-02-04 01:31 被阅读43次

仅供学习，转载请注明出处

需求

编写一个文字缩进的示例

示例

这上面的第二个段落就是实现了缩进的效果。
第三个段落实现的是水平居中的效果。
第四个段落实现的是水平靠右，垂直居中的效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            height: 100px;
            margin: 50px auto;
            background: cyan;
        }

        .p2{
            text-indent: 90px;
        }

        .p3{
            text-align: center;
        }

        .p4{
            text-align: right;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <!-- p.p${段落文件演示$}*3 -->
    <p class="p1">段落文件演示1</p>
    <p class="p2">段落文件演示2</p>
    <p class="p3">段落文件演示3</p>
    <p class="p4">段落文件演示4</p>
</body>
</html>