Question

我试图将我的文本放在我的锚的正中间，但它并没有这样做。

我不知道该怎么做，我已经尝试过改变填充但是什么都没做

＆＃13;

#navbar ul {
  color: #000;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

#navbar li {
  color: #000;
  float: right;
}

#navbar li a {
  width: 80px;
  text-align: center;
  display: block;
  padding: 0px 20px;
  height: 52px;
  background-color: #74CCFF;
  font-family: 'Cabin', sans-serif;
  color: #fff;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar li a:hover {
  transition: 0.2s;
  background-color: #4400FF;
}

#navbar li a#contact {
  border-right: 1px solid #fff;
}

＆＃13;

Answer 1

由于您的导航项具有静态高度，因此您可以使用与高度匹配的行高。只要你的链接文本总是只有一行，它就会居中。

#navbar li a {
 height: 52px;
 line-height: 52px;
}

示例：

＆＃13;

#navbar ul {
  color: #000;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

#navbar li {
  color: #000;
  float: right;
}

#navbar li a {
  width: 80px;
  text-align: center;
  display: block;
  padding: 0px 20px;
  height: 52px;
  line-height: 52px;
  background-color: #74CCFF;
  font-family: 'Cabin', sans-serif;
  color: #fff;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar li a:hover {
  transition: 0.2s;
  background-color: #4400FF;
}

#navbar li a#contact {
  border-right: 1px solid #fff;
}

＆＃13;

<div id="navbar">
  <ul>
    <li>
      <a id="contact" href="#" alt="Contact">Contact</a>
    </li>
    <li>
      <a id="about" href="#" alt="About">About</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

尝试这样做

a {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

如果在中心没有对齐，请在<p>之后和css中添加<a>：

a p {
position: relative; 
top:50%; left:50%; 
transform:translate(-50%, -50%;)
}

这是一个很好的解决方案，因为无论<div>的大小如何，它都会自动移动到中心，您还可以添加多行文字。

在HREF中向下移动文本

2 个答案: