text-align属性在CSS中的应用

最新推荐文章于 2023-03-02 21:46:14 发布

初见终是老

最新推荐文章于 2023-03-02 21:46:14 发布

阅读量1.2k

点赞数 3

分类专栏： CSS属性应用文章标签： css html 前端 python

本文链接：https://blog.csdn.net/weixin_45538749/article/details/128023390

版权

CSS属性应用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的text-align属性，用于控制HTML元素内的文本水平对齐方式。属性值包括left（左对齐）、right（右对齐）和center（居中对齐）。通过示例代码展示了这三个值在实际网页中的应用，帮助读者理解并掌握该属性的使用。

摘要由CSDN通过智能技术生成

一、【概念】

text-align作为HTML元素属性，在CSS中其属性用作控制文本水平方向的对齐方式。

二、【使用】

1.属性值

left：左对齐
right：右对齐
center：居中对齐

三、【示例】

1.left （程序示范）

<!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>
    <!-- title>网页标题</title> -->
    <style type="text/css">
    h1{
        text-align: left;
        /*text-align属性用于设置元素内文本内容的水平对齐方式
        left：左对齐（默认值）
        right：右对齐
        center：居中对齐
        */
    }
    </style>
    
</head>
<body>
    <h1>阅读者都很帅</h1>
</body>
</html>

运行结果

2.right（程序示范）

<!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>
    <!-- title>网页标题</title> -->
    <style type="text/css">
    h1{
        text-align: right;
        /*text-align属性用于设置元素内文本内容的水平对齐方式
        left：左对齐（默认值）
        right：右对齐
        center：居中对齐
        */
    }
    </style>
    
</head>
<body>
    <h1>阅读者都很帅</h1>
</body>
</html>

运行结果
3.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>Document</title>
    <!-- title>网页标题</title> -->
    <style type="text/css">
    h1{
        text-align: center;
        /*text-align属性用于设置元素内文本内容的水平对齐方式
        left：左对齐（默认值）
        right：右对齐
        center：居中对齐
        */
    }
    </style>
    
</head>
<body>
    <h1>阅读者都很帅</h1>
</body>
</html>