Question

我所拥有的是一个给定大小的容器，里面有几个<a>标签。这些链接都在一条线上并垂直居中。现在我想要做的是为<a>标签指定一个高度，这样不仅可以查看文本，还可以查看它周围的框。我设法做到了，但不幸的是我无法使文本框中的文字居中。

因此，如果可能的话，我希望将文本置于按钮中心而不更改html方面。这是我目前情况的JSF：

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

使文本垂直对齐到中间（＆＃34;居中＆＃34;垂直）的自然选择是添加CSS vertical-align: middle。在这种情况下它不起作用，因为它宁愿尝试对齐整个<a>标签本身，而不是其内容。

您可以尝试使用line-height代替height，这将使TEXT的整行保留足够的空间并按照您的意愿对齐自己。

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

Answer 2

height使顶部和底部空间不对称。所以你必须填充两个而不是指定高度使框高。我在下面用简写height属性替换了padding属性。它现在工作正常，高度相同，＆＃34;按钮＆＃34;文字适合盒子的中心。检查自己：

a {
    display: inline-block;
    text-decoration: none;
    color: green;
    padding: 60px 12px; //top and bottom padding = 60px , left and right padding = 12px;

    background-color: #000000;
    text-align: center;
    vertical-align: middle;

}

哦，我添加了text-align: center和vertical-align: middle，以确保在填充更改时它保持在中心位置。

从具有居中文本的标记创建按钮

2 个答案: