黑马程序员技术交流社区

标题: CSS设置文本的水平对齐方向 [打印本页]

作者: 春暖花开啊 时间: 2019-11-15 15:20
标题: CSS设置文本的水平对齐方向
本帖最后由春暖花开啊于 2019-11-17 20:32 编辑

介绍#
在CSS中text-align属性有3种值，如下：left左、center中、right右。
直接进入text-align属性实践，如果大家是新手自己一定要去实践哈。
左代码块

[AppleScript] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>设置文本的水平对齐方向</title>

    <style>

        .box{

            text-align: left;

        }

    </style>

</head>

<body>

    <h2 class="box">成功不是击败别人，而是改变自己</h2>

</body>

</html>

注意：默认就是向左对齐。

中代码块

[AppleScript] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>设置文本的水平对齐方向</title>

    <style>

        .box{

            text-align:center;

           

        }

    </style>

</head>

<body>

    <h2 class="box">成功不是击败别人，而是改变自己</h2>

</body>

</html>

右代码块

[AppleScript] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>设置文本的水平对齐方向</title>

    <style>

        .box{

            text-align: right;

        }

    </style>

</head>

<body>

    <h2 class="box">成功不是击败别人，而是改变自己</h2>

</body>

</html>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2