文本对齐（text-align）

在CSS中，`text-align` 属性用于设置元素内文本的水平对齐方式。它定义了元素内容的水平方向对齐方式，而不是元素自身在容器中的对齐方式。`text-align` 属性可以应用于任何内联或块级元素。

以下是`text-align`属性的基本用法和一些示例：

```css
/* 设置元素内文本水平对齐方式 */
.element {
  text-align: left; /* 左对齐 */
  text-align: right; /* 右对齐 */
  text-align: center; /* 居中对齐 */
  text-align: justify; /* 两端对齐 */
  text-align: inherit; /* 继承父元素的文本对齐方式 */
  text-align: initial; /* 重置为默认值 */
  text-align: inherit; /* 使用浏览器默认的文本对齐方式 */
}
```

### 示例

假设我们有一个包含文本的`div`元素，我们可以使用`text-align`属性来设置文本的对齐方式：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Align Example</title>
<style>
  .left-align {
    text-align: left;
  }
  
  .right-align {
    text-align: right;
  }
  
  .center-align {
    text-align: center;
  }
  
  .justify-align {
    text-align: justify;
  }
</style>
</head>
<body>

<div class="left-align">
  Left Aligned Text
</div>

<div class="right-align">
  Right Aligned Text
</div>

<div class="center-align">
  Center Aligned Text
</div>

<div class="justify-align">
  Justify Aligned Text with multiple lines. This text is justified. This text is justified. This text is justified. This text is justified.
</div>

</body>
</html>
```

在上面的示例中，我们定义了四个不同的类，每个类都设置了不同的`text-align`值。当这些类应用于相应的`div`元素时，文本将根据设置的值进行对齐。

### 注意事项

- `text-align` 属性不会影响元素的宽度，它只会影响元素内文本的水平位置。
- 对于块级元素，如果设置了`text-align`属性，通常需要同时设置`width`属性或使用`display: inline-block;`等属性来控制元素的宽度。
- 对于内联元素，`text-align` 属性可以有效地控制文本的对齐方式，而无需设置宽度。
- `text-align` 属性不会影响元素的垂直对齐方式，这通常由`vertical-align`属性控制。

通过这些基础知识，你可以开始使用`text-align`属性来调整你的网页设计中的文本对齐方式。

文本对齐（text-align）

目录