上移内联显示的字符

Question

我有面包屑菜单的以下标记:

<div>
    <span class="start-here">You are here:<span>
    <a href="/">example.com</a>
    <span class="raquo"> › </span> 
    <a href="/news">News</a>
    <span class="raquo"> › </span> 
    Title
</div>

当所有元素以内联方式显示时,是否有一种智能方法可以将那些› (.raquo)字符移动几个像素而无需绝对定位？我希望这个字符比其他字符小,并显示在行的中心(或向下/向上的一些像素).

(我需要它也适用于IE6及以上)

Answer 1

.raquo {
    position:relative;
    top:-2px;
}

最适合我

Answer 2

不确定IE6,但似乎以下应该让你接近你想要的.

.raquo {
  font-size: 10px;
  vertical-align:middle; 
}

只需制作font-size你需要的任何东西,垂直对齐应该将它设置为中间line-height.

Answer 3

vertical-align: 3px

任何数量或单位。

对于自定义字体以及其他不正确的跨度和元素之类的东西，它非常强大。我只是在从设计师那里得到的字体上使用了它。