需要帮助垂直对齐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

即可

line-height : 16vw;

Answer 3

将此添加到您的CSS也可以使用：

align-items: center; 
display: flex;

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;