HTML CSS 页面中心文本 - Html

在 Web 页面中，许多元素和文本需要在页面的中央对齐，这不能直接通过 HTML 完成。通过使用 CSS，您可以使用多种方式在 HTML 页面中居中文本和其他元素。

以下是一些居中文本的 CSS 技术：

居中文本

使用 text-align 属性

使用 text-align 属性可以将文本居中对齐。请参考以下示例代码：

<p class="center">这是居中文本</p>

.center {
  text-align: center;
}

使用 display 和 text-align 属性

您也可以使用 display 和 text-align 属性将块级元素居中。请参考以下示例代码：

<div class="center">
  <h2>这是居中文本</h2>
  <p>这也是居中文本</p>
</div>

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  text-align: center;
}

居中块级元素

使用 margin 属性

使用 margin 属性可以将块级元素居中。请参考以下示例代码：

<div class="container">
  <div class="box"></div>
</div>

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  margin: auto;
  background-color: lightblue;
}

使用 flexbox

使用 Flexbox 可以轻松地将块级元素居中。请参考以下示例代码：

<div class="container">
  <div class="box"></div>
</div>

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

居中图像

使用 display 和 margin 属性

可以使用 display 和 margin 属性将图像居中。请参考以下示例代码：

<div class="container">
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</div>

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  margin: auto;
}

结论

以上是一些在 HTML CSS 页面中心文本的方法。使用这些技术，您可以轻松地在 Web 页面中居中文本、块级元素和图像。