字体的紧凑形式会干扰垂直对齐

【问题标题】：Compact form for font interferes with vertical-alignment字体的紧凑形式会干扰垂直对齐
【发布时间】：2014-05-21 03:52:12
【问题描述】：

我有这个代码：

li
{
   width: 200px; height: 22px; overflow: hidden;
   float: left;

   line-height: 22px; letter-spacing: -1px;
   font-weight: 400; font-size: 14px; font-family: "Helvetica Neue";
   text-transform: uppercase;
}

我注意到，如果我把所有的字体属性分开写，那么我的文本就会在 li 框中垂直对齐中间。

font: 400 14px "Helvetica Neue";

否则，如果我使用紧凑形式，文本是垂直对齐的。

我想知道为什么会这样。

提前谢谢大家。

【问题讨论】：

标签： css vertical-alignment text-alignment

【解决方案1】：

DEMO

CSS 速记描述为

selector {  
    font: font-style font-variant font-weight font-size/line-height font-family;  
}

1) 在您的情况下：font: 400 14px "Helvetica Neue";
在这里，您没有定义任何行高，因此它采用默认行高，并且 Text 似乎垂直对齐顶部

2) 如果你使用font: 400 14px/22px "Helvetica Neue";
在这里，您正在定义行高 - 22px，这将垂直居中对齐

旁注

垂直对齐中间有效，因为 LI 的高度 = 行高

Article URL

【讨论】：

非常感谢，很清楚。我不知道“/line-height”属性！
没有问题 :) 祝你好运希望它有所帮助！