时间戳

首页 > 解决方案 > 尝试垂直居中文本时出现重叠问题

html - 尝试垂直居中文本时出现重叠问题

问题描述

目前我正在尝试学习HTML和CSS使用Bootstrap-5

我想在垂直和水平中心有一个 2 行文本。问题是，我无法让它正确对齐，而且它总是会重叠。我已经花了一个小时来解决这个问题，但无法弄清楚如何解决它。

代码：

<!-- Bootstrap 5.0.x -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<h1 class="fw-light position-absolute top-50 start-50 translate-middle fs-1">Velkommen</h1>
<br>
<h1 class="fw-light position-absolute top-50 start-50 translate-middle fs-4">HTX 2021 - 2024</h1>

当前结果：
预览图

标签： htmlcssbootstrap-5

解决方案

position: absolute;这是完全错误的方法。要将文本垂直和水平居中，您应该使用Flexbox！

  1. 将您的元素包装在一个容器中并应用display: flex;到它：d-flex.

  2. 要保持正常的块级元素行为，请使用flex-direction: column：flex-column

  3. 要水平居中文本使用align-items-center和垂直居中文本：justify-content-center

  4. 要在屏幕上垂直居中文本，容器的高度必须等于屏幕高度：您可以通过以下方式实现：vh-100

<!-- Bootstrap 5.0.x -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="vh-100 d-flex flex-column justify-content-center align-items-center">
  <h1 class="fw-light fs-1">Velkommen</h1>
  <br>
  <h1 class="fw-light fs-4">HTX 2021 - 2024</h1>
</div>

推荐阅读