Warum vertical-align: middle
funktioniert das nicht ? Und doch vertical-align: top
tut Arbeit.
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
Warum vertical-align: middle
funktioniert das nicht ? Und doch vertical-align: top
tut Arbeit.
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
vertical-align
Antworten:
In diesem Fall ist es eigentlich ganz einfach: Wenden Sie die vertikale Ausrichtung auf das Bild an. Da alles in einer Zeile steht, ist es wirklich das Bild, das Sie ausrichten möchten, nicht der Text.
Getestet in FF3.
Jetzt können Sie Flexbox für diese Art von Layout verwenden.
quelle
span
Schriftgröße erhöhen . Siehe meine Antwort .width:16px;height:16px
) einstellen , können Sie sehen, dass das Bild zu niedrig ist ...Hier sind einige einfache Techniken für die vertikale Ausrichtung:
Einzeilige vertikale Ausrichtung: Mitte
Dieser ist einfach: Stellen Sie die Zeilenhöhe des Textelements auf die des Containers ein
Mehrzeilige vertikale Ausrichtung: unten
Positionieren Sie ein inneres Div absolut relativ zu seinem Container
Mehrzeilige vertikale Ausrichtung: Mitte
Wenn Sie alte Versionen von IE <= 7 unterstützen müssen
Damit dies auf der ganzen Linie richtig funktioniert, müssen Sie das CSS ein wenig hacken. Glücklicherweise gibt es einen IE-Fehler, der zu unseren Gunsten wirkt. Wenn Sie
top:50%
den Behälter undtop:-50%
den inneren Teil einstellen, können Sie das gleiche Ergebnis erzielen. Wir können beide mit einer anderen Funktion kombinieren, die der IE nicht unterstützt: erweiterte CSS-Selektoren.Variable Behälterhöhe vertikal ausrichten: Mitte
Diese Lösung erfordert einen etwas moderneren Browser als die anderen Lösungen, da sie die
transform: translateY
Eigenschaft nutzt . ( http://caniuse.com/#feat=transforms2d )Durch Anwenden der folgenden 3 CSS-Zeilen auf ein Element wird es unabhängig von der Höhe des übergeordneten Elements vertikal in seinem übergeordneten Element zentriert:
quelle
display:table
unddisplay:table-cell
CSS-Selektoren funktionieren hervorragend, außer natürlich in IE7 und darunter. Nachdem ich mir einige Stunden lang die Haare ausgerissen hatte, entschied ich, dass ich mich nicht wirklich mit jemandem befassen musste, der noch IE7- verwendete.display:table
In einigen Browsern gibt es einige Einschränkungen (in IE11max-height
funktioniert dies nicht, wenn sich das Element in einer Tabellenzelle befindet). In einigen Randfällen ist es daher keine gute Idee, die vertikale Ausrichtung mithilfe von Tabellenzellen durchzuführen.Verwandeln Sie Ihre
div
in einen Flex-Container:Jetzt gibt es zwei Methoden, um die Ausrichtungen für den gesamten Inhalt zu zentrieren:
Methode 1:
DEMO
Methode 2:
DEMO
Probieren Sie unterschiedliche Werte für Breite und Höhe
img
und unterschiedliche Werte für die Schriftgröße ausspan
und Sie werden sehen, dass sie immer in der Mitte des Containers bleiben.quelle
justify-content: center;
zentrieren , müssen Sie auch hinzufügen und für den Abstand (ohne Verwendung von <br/> Tags) möchten Sie möglicherweise auch ein Bild einfügenpadding: 1em;
. Tolles Update für uns moderne Browser-Entwickler.Sie müssen auf
vertical-align: middle
beide Elemente anwenden , damit sie perfekt zentriert sind.Die akzeptierte Antwort zentriert das Symbol um die Hälfte der x-Höhe des Textes daneben (wie in den CSS-Spezifikationen definiert ). Das mag gut genug sein, kann aber ein wenig abweichen, wenn der Text Auf- oder Abwärtsbewegungen aufweist, die ganz oben oder unten hervorstechen:
Links ist der Text nicht ausgerichtet, rechts ist er wie oben gezeigt. Eine Live-Demo finden Sie in diesem Artikel zum Thema vertikale Ausrichtung .
Hat jemand darüber gesprochen, warum
vertical-align: top
das Szenario funktioniert? Das Bild in der Frage ist wahrscheinlich größer als der Text und definiert somit den oberen Rand des Linienfelds.vertical-align: top
auf dem span-Element positioniert es dann einfach oben im Linienfeld.Der Hauptunterschied im Verhalten zwischen
vertical-align: middle
undtop
besteht darin, dass das erste Element relativ zur Grundlinie des Felds (das dort platziert wird, wo es benötigt wird, um alle vertikalen Ausrichtungen zu erfüllen, und sich daher eher unvorhersehbar anfühlt ) und das zweite Element relativ zu den äußeren Grenzen des Linienfelds (dh) verschoben wird greifbarer).quelle
Die in der akzeptierten Antwort verwendete Technik funktioniert nur für einzeiligen Text ( Demo ), nicht jedoch für mehrzeiligen Text ( Demo ) - wie dort angegeben.
Wenn jemand mehrzeiligen Text vertikal auf ein Bild zentrieren muss, gibt es einige Möglichkeiten (Methoden 1 und 2 inspiriert von diesem CSS-Tricks-Artikel )
Methode 1: CSS-Tabellen ( FIDDLE ) (IE8 + ( caniuse) ))
CSS:
Methode 2: Pseudoelement auf Container ( FIDDLE ) (IE8 +)
CSS:
Methode 3: Flexbox ( FIDDLE ) ( caniuse )
CSS (Die obige Geige enthält Herstellerpräfixe):
quelle
Dieser Code funktioniert sowohl im IE als auch im FF:
quelle
Weil Sie
line-height
die Höhe des Div einstellen müssen, damit dies funktioniertquelle
Grundsätzlich müssen Sie sich auf CSS3 konzentrieren.
quelle
Für den Datensatz sollten Ausrichtungsbefehle in einem SPAN nicht funktionieren, da es sich um ein Inline- Tag und nicht um ein Tag auf Blockebene handelt . Dinge wie Ausrichtung, Rand, Auffüllen usw. funktionieren bei einem Inline-Tag nicht, da der Inline-Punkt den Textfluss nicht stören soll.
CSS unterteilt HTML-Tags in zwei Gruppen: Inline- und Block-Ebene. Suchen Sie nach "CSS Block vs Inline" und ein großartiger Artikel wird angezeigt ...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Das Verständnis der wichtigsten CSS-Prinzipien ist ein Schlüssel dafür, dass es nicht so nervig ist.)
quelle
text-align
undvertical-align
(mit Ausnahme ihrer Anwendung auftd
Elemente zum Zweck legacy) für speziell gemeintinline
undinline-block
Elemente (span
,img
usw.).Verwenden Sie diese
line-height:30px
Option, damit der Text am Bild ausgerichtet wird:quelle
Sie können den Text auch
line-height
auf die Größe der Bilder innerhalb von einstellen<div>
. Stellen Sie dann die Bilder auf einvertical-align: middle;
Das ist im Ernst der einfachste Weg.
quelle
Ich habe
margin
in keiner dieser Antworten eine Lösung gefunden. Hier ist meine Lösung für dieses Problem.Diese Lösung funktioniert nur, wenn Sie die Breite Ihres Bildes kennen.
Der HTML
Das CSS
quelle
Ich benutze in der Regel 3px anstelle von
top
. Durch Erhöhen / Verringern dieses Werts kann das Bild auf die erforderliche Höhe geändert werden.quelle
Schreiben Sie diese Span-Eigenschaften
Verwendung
display:inline-block;
Wenn Sievertical-align
Eigenschaft verwenden. Dies sind zugeordnete Eigenschaftenquelle
Sie können Bild , wie sie
inline element
unter Verwendung vondisplay
Eigentumquelle
Auf einer Schaltfläche in jQuery Mobile können Sie sie beispielsweise ein wenig optimieren, indem Sie diesen Stil auf das Bild anwenden:
quelle
Mehrzeilige Lösung:
http://jsfiddle.net/zH58L/6/
Funktioniert in allen Browers und ie9 +
quelle
Es kann verwirrend sein, da stimme ich zu. Versuchen Sie, Tabellenfunktionen zu verwenden. Ich benutze diesen einfachen CSS-Trick, um Modalitäten in der Mitte der Webseite zu positionieren. Es hat große Browser-Unterstützung:
und CSS-Teil:
Beachten Sie, dass Sie die Größe des Bild- und Tabellencontainers formatieren und anpassen müssen, damit es wie gewünscht funktioniert. Genießen.
quelle
Erstens Inline-CSS nicht empfohlen, es bringt Ihr HTML wirklich durcheinander.
Zum Ausrichten von Bild und Spanne können Sie dies einfach tun
vertical-align:middle
.quelle
Ich bin mir nicht sicher, warum es nicht im Browser Ihrer Navigation gerendert wird, aber ich verwende normalerweise ein solches Snippet, wenn ich versuche, eine Kopfzeile mit einem Bild und einem zentrierten Text anzuzeigen. Ich hoffe, es hilft!
https://output.jsbin.com/jeqorahupo
quelle
Sie wollen wahrscheinlich das:
Probieren Sie
vertical-align
das Bild an, wie andere vorgeschlagen haben :CSS ist nicht ärgerlich. Sie lesen die Dokumentation einfach nicht . ; P.
quelle