HTML 文本对齐方式

HTML 文本对齐方式

基本对齐方式

1. 水平对齐

• <p align="left"> - 左对齐（默认）

• <p align="center"> - 居中对齐

• <p align="right"> - 右对齐

• <p align="justify"> - 两端对齐

2. 垂直对齐

• <td valign="top"> - 顶部对齐

• <td valign="middle"> - 垂直居中

• <td valign="bottom"> - 底部对齐

CSS 扩展对齐方式

1. text-align 属性

p {
  text-align: center; /* left | right | justify | center */
}

2. vertical-align 属性

td {
  vertical-align: middle; /* top | middle | bottom | baseline */
}

3. 其他对齐方式

/* 块级元素居中 */
div {
  margin: 0 auto;
  width: 80%;
}

/* 使用 Flexbox 对齐 */
.container {
  display: flex;
  justify-content: center; /* 水平对齐 */
  align-items: center;    /* 垂直对齐 */
}

/* 使用 Grid 对齐 */
.grid-container {
  display: grid;
  place-items: center; /* 同时水平和垂直居中 */
}

实例

HTML 对齐实例

<!-- 水平对齐 -->
<p align="left">左对齐文本</p>
<p align="center">居中对齐文本</p>
<p align="right">右对齐文本</p>

<!-- 表格垂直对齐 -->
<table>
  <tr>
    <td valign="top">顶部对齐</td>
    <td valign="middle">垂直居中</td>
    <td valign="bottom">底部对齐</td>
  </tr>
</table>

CSS 对齐实例

<style>
  .text-center {
    text-align: center;
  }
  .vertical-middle {
    vertical-align: middle;
  }
  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border: 1px solid #000;
  }
</style>

<div class="text-center">居中对齐的文本</div>
<div class="flex-center">Flexbox 居中内容</div>

功能说明

1. HTML 原生对齐属性：

• 简单易用，但不符合现代网页标准

• 逐渐被 CSS 替代

2. CSS 对齐方式：

• 提供更精确的控制

• 支持响应式设计

• 可以应用于更多元素类型

• 支持现代布局技术（Flexbox, Grid）

3. 最佳实践：

• 新项目应使用 CSS 进行文本对齐

• 表格单元格垂直对齐仍可使用 HTML 属性

• 复杂布局推荐使用 Flexbox 或 Grid