需要在HTML5和CSS3中垂直对齐文本的帮助

Question

.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练习网站，我想在中间用文字制作一个正方形。我得到了水平对齐，但是垂直对齐只是不想工作。

Answer 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>

Answer 2

将其添加到您的CSS中也将起作用：

align-items: center; 
display: flex;

Answer 3

只需添加到您的CSS

line-height : 16vw;

Answer 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;