Question

我有这段代码：

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";

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

我想了解为什么会这样。

提前谢谢大家。

Answer 1

<强> DEMO

CSS简写peoperties描述为

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

1）在你的情况下：font: 400 14px "Helvetica Neue";
这里你没有定义任何行高，因此它采用默认行高，而文本似乎是垂直对齐的顶部

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

<强>旁注

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

<强> Article URL

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

1 个答案: