控制标题位置（HTML中text-indent 和 text-align 的区别）

星途码客

于 2024-05-21 20:53:57 发布

阅读量628

点赞数 19

分类专栏：前端#HTML 文章标签： html 前端 css

本文链接：https://blog.csdn.net/2303_80856850/article/details/139101562

版权

5 篇文章 0 订阅

订阅专栏

总结：

1.text-indent可以通过数字一点点控制位置（可以精细控制标题在这行所在的位置）

2. text-align只能用关键词控制（left,right,center,justify)

text-indent 和 text-align 是 CSS 中用于控制文本对齐和缩进的两个不同属性，它们有以下区别：

text-indent 属性用于设置文本的首行缩进。它通常用于段落的第一行，使其相对于其他行有一个缩进量，类似于传统排版中的段落开头缩进。这个缩进量可以是固定值（如 2em 或 30px），也可以是百分比值。

示例1：

<body>

<div style="text-indent: 100px;"> 文字文字文字</div>

/*100px就是离左边距100像素，可以随意调节，若是想随意用数字调整一下标题在本行位置，上面这行就够了，拿去用吧*/

或<span style="display: block; width: 100%; text-indent: 100px;">文字文字文字</span>

/*不建议使用，这是内联元素，display: block; 是把他变成块元素 width:100%是铺满整行 text-indent: 100px;最后再调整位置，多余两步其实就是转换为类似于上面的div块元素 */

</body>

text-align 属性用于设置块级元素或内联块级元素中文本的水平对齐方式。它定义了文本块在其包含块中的水平对齐方式。可能的值包括 left、right、center 和 justify。

示例：

css

div {

text-align: center; /* 文本在 div 中居中对齐 */

}

功能不同：text-indent 是用于设置文本首行的缩进，而 text-align 是用于设置文本块在其包含块中的水平对齐方式。
作用范围不同：text-indent 只影响文本的首行，而 text-align 影响整个文本块。
可用值不同：text-indent 主要使用长度值（如 px、em）或百分比值来定义缩进量；而 text-align 使用关键词（如 left、right、center、justify）来定义对齐方式。
适用元素不同：虽然两者都可以应用于块级元素和内联块级元素，但 text-indent 通常用于段落元素（如 <p>），而 text-align 则更广泛地用于各种块级元素，如 <div>、<section> 等。

在实际应用中，你可以根据需要选择使用 text-indent 或 text-align 来控制文本的对齐和缩进。

(可能有说的不对的地方，还请指正)

关注

专栏目录