无法将文本放在CSS <div>页脚上

Question

我正在尝试在页脚上添加集中式文本，但是即使将边距设置为auto和text-align: center，文本也始终保留在左侧。 谁能找出缺失的东西？

.footer {
  position: absolute;
  margin: 100px auto 0;
  background-color: #393e46;
  height: 15%;
  top: 360%;
  padding: 16px 16px 0 16px;
  left: 0;
  right: 0;
}

.hyperlink {
  color: #cdffeb;
  position: relative;
  text-align: center;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  font-size: 2em;
}

<div class="footer">
<a class="hyperlink" href="https://www.linkedin.com/in/diogo-neiss-501001165/">LinkedIn</a>
<a class="hyperlink" href="https://github.com/diogoneiss">Git Hub</a>
</div>

Answer 1

只需将text-align: center添加到页脚即可解决，这是一个实时示例https://codepen.io/dobladov/pen/WLPoJy

Answer 2

尝试一下：

.footer {
  text-align: center;
  background-color: #393e46;
  height: 15%;
  top: 360%;
  padding: 16px 16px 0 16px;
  left: 0;
  right: 0;
}

.hyperlink {
  color: #cdffeb;
  position: relative;
  text-align: center;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  font-size: 2em;
}

<div class="footer">
<a class="hyperlink" href="https://www.linkedin.com/in/diogo-neiss-501001165/">LinkedIn</a>
<a class="hyperlink" href="https://github.com/diogoneiss">Git Hub</a>
</div>

Answer 3

您想使文本在页脚div的中心对齐。您可以将文本对齐方式放在页脚div

Answer 4

像这样使用display: flex

.footer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #393e46;
  height: 15%;
  top: 360%;
  left: 0;
  right: 0;
}

.hyperlink {
  color: #cdffeb;
  position: relative;
  font-size: 2em;
}

Answer 5

请考虑使用flex，轻松清洁地进行管理。只需将flex-direction设置为column，然后将flex box中的项目对齐到中心即可。

.footer {
  background-color: grey;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hyperlink {
  color: tomato;
  font-size: 2rem;
}

<div class="footer">
<a class="hyperlink" href="https://www.linkedin.com/in/diogo-neiss-501001165/">LinkedIn</a>
<a class="hyperlink" href="https://github.com/diogoneiss">Git Hub</a>
</div>