如何将我的 <a> 标签置于我的 div 中？

Question

我试图将我的 <a> 标签在 div 中垂直和水平居中。

这是我的：

#button{
    text-align:center;
    position:relative;
    border-radius:4px;
    height:27px;
    width:110px;
    margin-top:5px;
    background-color:#6f97b6;
    background-image:-webkit-linear-gradient(top, #6f97b6, #3f729b);
}
#text{
    color:#fff;
    font-size:14px;
    font-weight:700;
    line-height:1em;
    cursor:pointer;
}

在我的 html 文件中：

<div id="button">
    <a id="text">I am here!</a>
</div>

Answer 1

您应该将 line-height 添加到您的 a 等于 button 的高度。

#text{
    color:#fff;
    font-size:14px;
    font-weight:700;
    line-height:1em;
    cursor:pointer;
    line-height: 27px;
}

JSFiddle

Answer 2

将父级的 height 更改为 line-height。

这允许内联内容 a 然后垂直居中到中间，这是通过定义（高度）上下文将其居中的默认行为。如果没有这个，它会根据父级的总高度居中，包括上边距。

#button {
  text-align: center;
  position: relative;
  border-radius: 4px;
  line-height: 27px; /* <--- this */
  width: 110px;
  margin-top: 5px;
  background-color: #6f97b6;
  background-image: -webkit-linear-gradient(top, #6f97b6, #3f729b);
}
#text {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1em;
  cursor: pointer;
}

<div id="button">
  <a id="text">I am here!</a>
</div>

如何将我的 <a> 标签置于我的 div 中？

How can I center my <a> tag in my div?

html

css