垂直居中链接在里面Div

Question

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

左边的垂直列是我的站点菜单系统。该列是一个高度为100％的div，不同的细节是div放在它上面。

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

我看了这里，并使用了几个CSS网站& Android应用。这里的网站表明我不能，但我不明白为什么CSS组不会创建垂直居中功能，因为它似乎是必要的。

我只是想念一些东西，或者我真的想获得一些CSS不具备的东西吗？

Answer 1

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

尝试将其应用到你的身高30PX链接：

line-height: 30px; 

而这对于60像素高大：

line-height: 60px; 

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

Answer 2

添加到您的CSS。不管它会用自己的按钮的高度：

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

Answer 3

使用此：

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

这将集中所有链接。

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

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

这是无效的HTML。我不是“HTML必须始终有效”类型的人，但是当你可以很容易地修复它时，我认为这并不会伤害它的有效性。您应该使用以下内容：

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