Question

我为breadcrumbs菜单添加了以下标记：

<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

为了增加Gunner的答案，我最近发现使用以下内容非常有帮助。

vertical-align：3px

任何金额或单位

对于自定义字体和其他版本以及错误对齐的元素，它非常强大。

我刚用它来自我的设计师的字体。

希望这有帮助！

Answer 4

您可以在CSS中使用vertical-align:top; font-size:x-small;。虽然......很难在中间完美地完成......

Answer 5

以@sashn的答案为基础，如果您希望将来对它进行校对以防将来字体大小更改，我会这样做...

.raquo {
  position:relative;
  top:-0.1em;
}

这样，位置偏移将根据字体大小自动缩小或扩展。

Answer 6

我不想这样说......但你可以使用table。我发现它是唯一可靠的方法，以确保所有内容都在一行中垂直居中：

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

上移内联显示的字符

6 个答案: