Переместить вверх символ, отображаемый в строке

У меня есть следующая разметка для меню панировочных сухарей:

<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 и выше)

Ответ 1

Не уверен в IE6, но похоже, что следующее должно приблизиться к тому, что вы хотите.

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

Просто сделайте font-size все, что вам нужно, вертикальное выравнивание должно установить его в середину line-height.

Ответ 2

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

работал лучше для меня

Ответ 3

vertical-align: 3px

с любой суммой или единицей.

Он очень эффективен для таких вещей, как пользовательские шрифты и другие диапазоны и элементы, которые неправильно обоснованы. Я только использовал это на шрифте, который я получил от моего дизайнера.

Ответ 4

Вы можете использовать vertical-align:top; font-size:x-small; в CSS. Трудно добраться до середины, хотя...

Ответ 5

Я ненавижу это говорить... но вы можете использовать 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>