tricks - mdn css comment




Nach oben zeigendes Zeichen wird inline angezeigt (4)

Ich bin mir nicht sicher über IE6, aber es scheint, als ob das Folgende dich nah an das bringen sollte, was du willst.

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

Machen Sie einfach font-size was immer Sie brauchen, vertikale Ausrichtung sollte es auf die Mitte der Zeilenhöhe setzen.

Ich habe das folgende Markup für 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>

Gibt es eine schlaue Möglichkeit, diese ( .raquo ) Zeichen ein paar Pixel nach oben ohne absolute Positionierung zu verschieben, wenn alle Elemente inline angezeigt werden? Ich möchte, dass dieses Zeichen kleiner als die anderen ist und in der Mitte der Zeile angezeigt wird (oder einige Pixel nach unten / oben).

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


Ich hasse es, das zu sagen ... aber Sie könnten einen table benutzen. Ich habe festgestellt, dass dies der einzige zuverlässige Weg ist, um sicherzustellen, dass alles vertikal in einer Linie zentriert ist:

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

Um Gunners Antwort hinzuzufügen, habe ich kürzlich festgestellt, dass die Verwendung des Folgenden sehr hilfreich ist.

vertikal ausrichten: 3px

mit irgendeiner Menge oder Einheit

Es ist sehr leistungsfähig für Dinge wie benutzerdefinierte Schriftarten und andere Bereiche und Elemente, die falsch begründet sind.

Ich habe es nur für eine Schriftart verwendet, die ich von meinem Designer bekommen habe.

Hoffe das hilft!


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

hat am besten für mich funktioniert





positioning