Mover hacia arriba personaje aparece en línea

Question

tengo el siguiente marcado para el menú de migas de pan:

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

¿Hay una manera inteligente para mover esos › (.raquo) caracteres de unos pocos píxeles sin posicionamiento absoluto cuando todos los elementos son se muestra en línea? Quiero que este carácter sea más pequeño que los demás y que se muestre en el centro de la línea (o algunos píxeles hacia abajo/arriba).

(necesito que funcione también para IE6 y hacia arriba)

Answer 1

No estoy seguro de IE6, pero parece que el siguiente debe conseguir que cerca de lo que desea.

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

Simplemente haga font-size lo que sea necesario, alineación vertical debe ponerlo en el centro de la line-height.

Answer 2

Odio decir esto ... pero podría usar un table. He encontrado que es la única manera confiable de asegurarse de que todo se centra verticalmente en una línea:

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

Answer 3

Puede utilizar vertical-align:top; font-size:x-small; en el CSS. Es difícil conseguir la perfección en el medio, aunque ...

Answer 4

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

funcionaron mejor para mí