Question

＆＃13;

footer {
  text-align: center;
  color: #FFF;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 90px;
  background-color: #464646;
}

＆＃13;

<footer>
  &copy; Name
</footer>

＆＃13;

我希望我的名字位于页脚的正中心。但它只会居于顶端。有人能回答这个非常基本的问题吗？尽量不要让你的答案变得困难，因为我只是一个初学者。

Answer 1

在询问之前，如果您的问题有任何答案，请在互联网上查看。你可以通过很多方式垂直对齐。

这里的另一个人通过告诉你使用line-height来做回答.DO没有设置行高来对齐中心。这是一个非常糟糕的做法。因为如果由于某种原因你的文字出现在线上，一切都会破裂。

尝试制作几乎适用于任何情况的内容。

但是，这里有一个display：flex;

的例子

＆＃13;

footer {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #FFF;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 90px;
  background-color: #464646;
  vertical-align: middle;
}

＆＃13;

<footer>
       <span>&copy; Name </span>
</footer>

＆＃13;

Answer 2

快速简便的方法是将页脚的line-height设置为与height相同的值，如下所示：

＆＃13;

footer {
  text-align: center;
  color: #FFF;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 90px;
  background-color: #464646;
  line-height: 90px;
}

＆＃13;

<footer>
  &copy; some Name
</footer>

＆＃13;

如何让我的页脚文本垂直居中？

2 个答案: