html - Div 内部的垂直居中链接

Question

左侧的垂直列是我的站点菜单系统。该列是一个高度为 100% 的 div，不同的细节都覆盖在它上面。

这些按钮是带有空白按钮作为背景的 DIV，上面有链接。我有两个不同大小的按钮，大的一个 60 像素高，一个小的 30 像素。无论按钮的 DIV 高度如何，使用 CSS 可以让链接垂直居中吗？

我看过这里并使用了一些 CSS 网站和 Android 应用程序。这里的网站建议我不能，但我不明白为什么 CSS 组不会创建垂直居中功能，因为它似乎非常需要。

我只是错过了一些东西，还是我真的想得到一些 CSS 不可用的东西？

score 2 · Accepted Answer

根据您的站点，您可以使用它line-height来调整文本的垂直位置。

尝试将此应用于 30px 高的链接：

line-height: 30px;

这对于 60px 高：

line-height: 60px;

此外，您不应该在<div>标签内嵌套<a>标签。

score 2 · Accepted Answer

用这个：

.menubuttonthick{line-height:60px;}
.menubuttonthin{line-height:30px;}

这将使您的所有链接居中。

另一方面，目前您具有以下结构：

<a href="#">
  <div>text</div>
</a>

那是无效的 HTML。我不是那种“HTML 必须始终有效”的人，但是当您可以轻松修复它时，我认为让它有效不会有什么坏处。您应该使用以下内容：

<div>
  <a href="#">text</a>
</div>

score 0 · Accepted Answer

将此添加到您的 CSS 中。无论按钮的高度如何，它都会起作用：

.menubar a div {
    display: table-cell;
    vertical-align: middle;
}

3 回答 3