Nach oben zeigendes Zeichen wird inline angezeigt

Habe ich das folgende markup für das breadcrumbs Menü:

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

Ist es eine intelligente Art und Weise zu verschieben › (.raquo) Zeichen, ein paar Pixel nach oben, ohne absolute Positionierung, wenn alle Elemente angezeigt werden inline? Ich möchte diese Zeichen, die kleiner als die anderen und erscheint in der Mitte der Zeile (oder einige Pixel nach unten/oben).

(Ich brauche es zum arbeiten, auch für IE6 und höher)

InformationsquelleAutor der Frage takeshin | 2011-02-02

  1. 4

    Nicht sicher, IE6, aber es scheint, wie das folgende sollte Euch in der Nähe, was Sie wollen.

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

    Nur machen font-size was Sie brauchen, vertikal ausrichten sollte, legen Sie es auf die Mitte des line-height.

    InformationsquelleAutor der Antwort Gunner

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

    besten funktioniert für mich

    InformationsquelleAutor der Antwort sashn

  3. 1

    Können Sie vertical-align:top; font-size:x-small; im CSS. Es ist schwer zu bekommen, genau in der Mitte obwohl...

    InformationsquelleAutor der Antwort anothershrubery

  4. 0

    Hinzufügen Gunner Antwort, ich habe vor kurzem festgestellt, dass mit den folgenden, sehr hilfreich ist.

    vertical-align: 3px

    mit jeder Menge oder Einheit

    Es ist sehr mächtig für Dinge wie benutzerdefinierte Schriftarten und andere Spannweiten und Elemente, die sind falsch begründet.

    Ich benutzte es auf eine schriftart, die hab ich von meinem designer.

    Hoffe, das hilft!

    InformationsquelleAutor der Antwort imnickvaughn

  5. -4

    Ich hasse es dies zu sagen... aber man könnte ein table. Ich habe festgestellt, dass es die einzige zuverlässige Weg, um sicherzustellen, dass alles vertikal zentriert in einer Zeile:

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

    InformationsquelleAutor der Antwort Keltex

Schreibe einen Kommentar