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（内联内容）通过定义（高度）上下文以使其居中，从而垂直居中于中间，这是其默认行为。如果没有这个，它将根据父级的总高度进行居中，包括上边距。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

如何将<a> tag in my div?</a>置于中心位置

2 个答案: