Ich habe einen angemeldeten Benutzer-Header, der a anzeigtBegrüßung, eine Miniaturansicht des Benutzerprofilbilds (immer mit einer festen Größe von 30 x 30) und ein Link zum Abmelden. Zwischen jedem Text und dem Foto befinden sich vertikale Trennzeichen.
<span>Hello [username]</span>
<span class="divider"></span>
<img src="/images//photo.jpg" />
<span class="divider"></span>
<a href="/logout">Logout</a>
Hier ist das Ergebnis, das ich anstrebe:
.. aber die Höhe des Bildes drückt alle anderen Elemente "nach unten", so dass ich Folgendes bekomme:
Wie kann ich diese vertikal ausrichten - gibt es eine Möglichkeit, ohne fest programmierte px-Ränder / Auffüllungen für jedes Element vorzugehen?
Antworten:
5 für die Antwort № 1Wrrite vertical-align:middle; oder vertical-align:top;. Schreiben Sie wie folgt:
img, span , a{
vertical-align:middle
}
Überprüfen Sie dies http://jsfiddle.net/bB9vV/
1 für die Antwort № 2
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img, .divider{float:left;}
.up{margin-bottom:15px; float:left;}
</style>
</head>
<body>
<span class="up">Hello [username]</span>
<span class="divider"></span>
<img src="/images//photo.jpg" />
<span class="divider"></span>
<a class="up" href="/logout">Logout</a>
</body>
</html>
1 für die Antwort № 3
Wenn ich Sie richtig verstehe, denke ich, werden Siemöchte die Zeilenhöhe des Teilers mit CSS ändern. Geben Sie der Zeilenhöhe einen Wert, der der Höhe Ihres Bildes entspricht. Dann müssen Sie den Text zentrieren.
.divider{
line-height:30px;
}
BEARBEITEN Möglicherweise müssen Sie auch Ihr Bild ausrichten. BEISPIEL Verwenden Sie {vertical-align: middle;} für Ihr Bild
Mehr Infos hier Bild vertikal ausrichten