css - 在导航中突出显示元素

Question

地狱，我正在制作一个导航，其中一个特定的元素应该从导航的其他元素中突出显示。我创建了一个突出显示的 CSS 类，我在其中增加了字体大小。但是，文本与较小的文本不在同一高度。

#navigation .bar a.highlight{
font-size: large;
}

它看起来像这样：

抱歉，我是 css 和 html 的新手，我想这是一个简单的解决方案。

请看一下我的代码 http://jsfiddle.net/FcbJv/

Answer 1

首先，我建议不要使用largeCSS 中的关键字作为字体大小，而是使用 px 或 em 单位（更好的可维护性，并且浏览器可以不同地解释这些关键字）。

您可以通过与字体大小的增加成比例地减小菜单项line-height上的来达到您想要的效果。.highlight这可以保持菜单项的垂直节奏。

• jsfiddle

CSS

/*EM  (personal preference) */

#navigation .bar a.highlight{
   font-size: 1.4em; /* we increase size by .4ems */
   line-height:.6em; /* so we reduce line-height by .4 ems */
}

/* PX */

#navigation .bar a.highlight{
    font-size: 18px; /* just guessing here, make sure to set this to the actual desired height */
    line-height:10px;
}

Answer 2

您需要添加一个line-height.

试试这个：

#navigation .bar a.highlight {
    font-size: large;
    line-height: 12px; /*Same as your font-size for normal items*/
}

因为页面的字体大小是 12px，a line-heightof12px将垂直居中。如果更改字体大小，请务必更改line-height.

检查这个 JSFiddle。

Answer 3

在 CSS 中垂直对齐是让你发疯的事情之一。

尝试改进line-height列表项：

line-height: 16px;

此外，请尝试具体说明font-size您想要而不是使用的large内容，因为它可能因浏览器而异。