时间戳

首页 > 解决方案 > 在 CSS 中的 div 中水平和垂直居中文本

html - 在 CSS 中的 div 中水平和垂直居中文本

问题描述

我div在 HTML 中创建了一个：

  .Div {
  border: 1px solid red;
  margin: 1px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
  height: 80px;
  }
  ...
    <div class="Div">
    Just testing my Div.
    </div>
  ...

输出： 在此处输入图像描述

我希望文本在这个矩形的中间，垂直和水平。我应该如何实现它？

需要说明的是，我没有div在主体内部使用它，它在另一个内部使用div；但在那我也有text-align: center;。我不知道这是否重要；但如果需要，我可以提供有关此代码的更多详细信息。

PS：我对 css 和 html 很陌生。如果此代码不符合某些标准，请接受我的道歉。

标签： htmlcss

解决方案

有几种方法可以做到这一点。由于您自己首先尝试使用vertical-align，因此vertical-align只能使用display: table-cell;. 为了实现它，您应该将您的div,设置display为table-cell，然后您还应该width为您div定义一个特定的（我只是100vw用来填充可用的视口）。

所以你的最终代码应该是这样的：

.Div {
  border: 1px solid red;
  margin: 1px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-size: 20px;
  height: 80px;
  width: 100vw;
}
<div class="Div">
  Just testing my Div.
</div>

但是如果你想要一些通用的方法，你应该使用它flexbox。为了使用flexbox，您应该定义三个特定的属性来满足您的要求。

  1. display: flex;. 这将表明您div的弹性项目，然后他们的孩子应该遵循弹性规则。
  2. align-items: center;. 这将表明您的所有项目都应水平对齐在您的中间div。
  3. justify-content: center;. 这将表明您的所有项目都应在div垂直中间对齐。

.Div {
  border: 1px solid red;
  margin: 1px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  height: 80px;
}
<div class="Div">
  Just testing my Div.
</div>

推荐阅读