🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS模板：text-align: center;

📝 使用用途

此模板适用于希望将文字或标题在页面中水平居中显示的场景。适合用于标题、按钮或提示文字的居中排列。

📘 说明

text-align 属性设置为 center 时，可以将文本在其父元素中水平居中。本模板通过 .text-center 类简化应用。

✅ 示例

这是一个居中显示的文本示例。

📄 代码（片段）

<style>
  .text-center {
    text-align: center;
  }
</style>

📦 代码（完整 HTML）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>文本居中示例</title>
  <style>
    .text-center {
      text-align: center;
    }
  </style>
</head>
<body>
  <p class="text-center">这是一个居中显示的文本示例。</p>
</body>
</html>
已复制！

🧩 应用与使用方法

text-align: center; 是一个简单但非常通用的 CSS 属性。不仅能用于基本的文本居中，还可以在各种场景中发挥作用。

📌 多元素统一居中

给父元素添加 .text-center 类后，其内所有的行内元素和文本都会被居中对齐。例如，所有位于 <div class="text-center"> 内的 <p>、<span> 和 <a> 标签都会被同时居中排列。

🎯 按钮和导航的对齐

如果想让导航菜单或按钮组居中，对其容器应用 text-align: center; 是有效的。请注意，该属性对行内或内联块元素生效（例如带有 display: inline-block; 的 <button> 或 <a>），父元素的文本对齐会影响它们。

⚠️ 注意事项

该属性仅影响行内元素和文本，不会将块级元素本身移动到居中。若要居中块级元素，需要配合使用 margin: 0 auto;。

此外，在响应式设计中，居中对齐适用于宽屏幕，但在手机等窄屏幕上，左对齐可能更易阅读。使用媒体查询根据屏幕大小切换对齐方式是一种良好做法。

相关模板