需要帮助在 HTML5 和 CSS3 中垂直对齐文本 [重复]答案

【问题标题】：Need help vertically aligning text in HTML5 and CSS3 [duplicate]需要帮助在 HTML5 和 CSS3 中垂直对齐文本 [重复]
【发布时间】：2017-04-30 08:45:18
【问题描述】：

.Cube {
  float: left;
  height: 16vw;
  width: 16vw;
  background-color: #545454;
  vertical-align: middle;
  text-align: center;
}

<div class="Cube">
  <a href="#">Random Stuff</a>
</div>

所以我一直在练习使用 html5 和 CSS 制作网站，我想在中间制作一个带有文本的正方形。我得到了水平对齐，但垂直对齐就是不想工作。

【问题讨论】：

为它使用 flex

标签： html css

【解决方案1】：

在这种情况下/如果是单行，我认为最简单的解决方案是添加与元素高度相同的行高。

line-height: 16vw;

.Cube {
  float: left;
  height: 16vw;
  width: 16vw;
  line-height: 16vw;
  background-color: #545454;
  text-align: center;
}

<div class="Cube">
  <a href="#">Random Stuff</a>
</div>

【讨论】：

非常感谢！

【解决方案2】：

将此添加到您的 css 中也可以：

align-items: center; 
display: flex;

【讨论】：

【解决方案3】：

只需添加到您的 CSS 中

line-height : 16vw;

【讨论】：

【解决方案4】：

您可以使用您的 CSS 代码尝试 display:inline;

.Cube {
  float: left;
  height: 16vw;
  width: 16vw;
  background-color: #545454;
  display:inline;
  text-align: center;
  vertical-align: middle;
}

否则，您可以使用填充从顶部对齐您的分区，

padding-top: 50px;

【讨论】：