Div 内部的垂直居中链接答案

【问题标题】：Vertically Centering Links in inside DivDiv 内部的垂直居中链接
【发布时间】：2013-03-08 05:50:30
【问题描述】：

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

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

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

我只是遗漏了一些东西，还是我真的想获得一些 CSS 不可用的东西？

【问题讨论】：

【解决方案1】：

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

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

line-height: 30px;

这对于 60 像素高：

line-height: 60px;

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

【讨论】：

【解决方案2】：

使用这个：

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

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

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

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

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

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

【讨论】：

"那是无效的 HTML" html5doctor.com/block-level-links-in-html-5
非常感谢，它使文本居中，就像我需要的那样。我还听取了您对嵌套 div 的建议。我知道这在技术上是无效的，但它确实有效。不幸的是，现在我通过将类移动到标记生成了一些工件。有什么想法吗？
@J.D.将以下 CSS 添加到您的粗菜单项中：display:block;height:60px;width:170px; 我相信您可以找出细菜单项的 CSS。 :)
@cimmanon HTML5，尽管被广泛使用（我也使用 doctype）仍然是实验性的，并且在旧浏览器中肯定不支持。对于像上面这样的网站，使用 Modernizer 之类的东西似乎有点矫枉过正，你不觉得吗？它可能会导致问题，我不知道它是否会，最好首先让它“有效”:)
感谢您的提示，它成功了。现在，你介意给我解释一下吗？我不明白，因为 div...没关系，这是因为我将类移动到内联元素。

【解决方案3】：

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

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

【讨论】：