html - 从文本居中的标签创建按钮

Question

我有一个给定大小的容器和一些 <a>里面的标签。这些链接都在一条线上并且垂直居中。现在我要做的是为 <a> 指定一个高度标签，这样不仅文本是可点击的，它周围的框也是可点击的。我设法做到了，但遗憾的是我无法使框中的文本居中。

因此，如果可能的话，我希望在不更改 html 方面的情况下将文本居中放置在按钮中。这是我当前情况的 JSF:

https://jsfiddle.net/ra3c3vtp/6/

html:

<div id=container>
    <div class=nav_list>
        <a href="">button</a>
        <a href="">button</a>
        <a href="">button</a>
    </div>
</div>

CSS:

#container {
    height: 160px;
    width: 600px;
    background-color: #ededed;
}

.nav_list {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

a {
    display: inline-block;
    text-decoration: none;
    color: green;
    padding-left: 12px;
    padding-right: 12px;
    height: 120px;
    background-color: #000000;

}

Answer 1

使文本垂直居中对齐(垂直“居中”)的自然选择是添加 CSS vertical-align: middle .在这种情况下它不会工作，因为它宁愿尝试对齐整个 <a>标记本身，而不是其内容。

您可以尝试使用 line-height而不是 height , 这将使整行 TEXT 保留足够的垂直空间并按您希望的方式自行对齐。

https://jsfiddle.net/ra3c3vtp/9/