html - 如何使链接居中用它的背景色？

Question

在 Mozilla 中，文本是这样排列的

 __________
|          | 
|   LINK   |
|__________|

但在 Safari 中它看起来像这样

 __________
|   LINK   | 
|          |
|__________|

代码：

.nav ul{
    text-align: center;
    margin:0; padding:0;
}

.nav ul li{
    display: inline;
    text-align: center;
}

.nav ul li a{
    font-size: 20pt;
    display: inline-block;
    font-family: Neou-thin, "Courier New";
    text-decoration: none;
    width: 145px;
    color: black;
    background-color: white;
    height: auto;
    text-align: center;
    vertical-align: middle;
}

非常感谢您对此的任何帮助！我只希望文本在块中居中。

Answer 1

使用line-height属性：

.nav ul li a{
    font-size: 20pt;
    display: inline-block;
    font-family: Neou-thin, "Courier New";
    text-decoration: none;
    width: 145px;
    color: black;
    background-color: white;
    height: auto;
    text-align: center;
    vertical-align: middle;
    line-height:50%;
}

试验后的值line-height以将文本放在正确的位置。

Answer 2

您可以使用这种方法将元素垂直对齐到中心的“新方法” 。

您只需要<i class="inliner"></i>在标签之前插入<a>，并包含以下 css：

.inliner {
    height: 100%;
}

.inliner,
.inliner + * {
    display: inline-block;
    vertical-align: middle;
}

我做了一个简短的小提琴来说明你如何做到这一点：http: //jsfiddle.net/scFkc/

Answer 3

Line-height 仅在您指定这样的高度时才有效：

.nav ul li a{
height:100px;
line-height: 100px;
}

不需要垂直对齐。

祝你好运。