CSS:text-align文本对齐方式的6种方式

无敌的黑星星

已于 2024-06-11 17:56:15 修改

阅读量3.2w

点赞数 4

文章标签：前端

于 2022-11-21 16:59:52 首次发布

本文链接： https://blog.csdn.net/qq_41848006/article/details/127968016

版权

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>