内部Div中的垂直居中链接

Question

http://www.fccorp.us/index.php

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

按钮是DIV，空白按钮作为背景，上面有链接。我有两个不同尺寸的按钮，大一个60px高，小一个30px。使用CSS可以让链接垂直居中，而不管按钮DIV的高度是什么？

我看过这里并使用了一些CSS网站＆amp; Android应用。这里的网站建议我不能，但我无法理解为什么CSS组不会创建垂直居中功能，因为它似乎是如此需要。

我只是遗漏了一些东西，还是我真的想要获得CSS无法提供的东西？

Answer 1

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

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

line-height: 30px;

这对于60px高：

line-height: 60px;

此外，您不应在<div>代码中嵌套<a>代码。

Answer 2

使用此：

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

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

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

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

这是无效的HTML。我不是“HTML必须始终有效”类型的人，但是当你可以轻松地修复它时，我认为它不会让它变得有效。您应该使用以下内容：

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

Answer 3

将此添加到您的CSS。无论按钮的高度如何，它都能正常工作：

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