Mehrere Lösungen für die Ausrichtung von CSS-Datensatztextsymbolen

Während der Entwicklung kommt es sehr häufig vor, dass Bilder und Text in einer Zeile angezeigt werden. Das Ausrichten zweier Inline-Elemente ist normalerweise am problematischsten. Manchmal gibt es immer eine leichte Abweichung, selbst wenn die am häufigsten verwendete Ausrichtungsmethode verwendet wird. Schauen wir uns das einfachste Beispiel an:

HTML-Teil:

<div Klasse="wrap">
    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">
    xxTestausrichtungsstil-
</div>

CSS-Teil:

.wickeln {
      Breite: 300px;
      Textausrichtung: zentriert;
      Rand: 20px automatisch;
      Schriftgröße: 14px;
 }
 .wrap img {
      Breite: 20px;
 }

Wenn Sie die Ausrichtung nicht verwenden, hat dies folgende Auswirkungen:

Die Standardausrichtung ist die baseline , also die unterste Linie des Buchstabens x.

Damit ist auch die erste Frage beantwortet. Wenn es keine weitere Einstellung für Bilder und Texte im Browser gibt, richten sich diese nach der Unterkante des Kleinbuchstaben x, also vertical-align:baseline;

Mehrere gängige Zentrierlösungen

1. Verwenden Sie vertical-align , um die Seite zu zentrieren

.wickeln {
    vertikale Ausrichtung: Mitte;
    }
.wrap img {
    vertikale Ausrichtung: Mitte;
}

Wenn wir die häufig verwendete vertical-align zum Ausrichten von Text und Bildern verwenden, gibt es tatsächlich eine gewisse Abweichung, wie unten gezeigt:

Der mittlere Wert der vertical-align ist eigentlich relativ zur halben Höhe des Kleinbuchstabens x, sodass das Bild an der Mitte des x ausgerichtet wird. Bei anderen Zeichen wie S und chinesischen Schriftzeichen werden Sie jedoch feststellen, dass es trotzdem eine leichte Abweichung gibt und das Bild relativ niedriger ist.

2. Verwenden Sie vertical-align und Spanne, um Text umzubrechen

Nehmen wir eine kleine Änderung vor, umschließen den Textteil mit einem Span-Tag und richten ihn mit vertical-align: middle; aus. Sie werden feststellen, dass sich das Bild dabei ein wenig nach oben verschiebt. Die Wirkung ist wie folgt:

3. Verwenden Sie ein flexibles Layout

Anzeige: Flex;
Elemente ausrichten: zentrieren; 

Allerdings kann es auch beim flexiblen Layout manchmal zu Abweichungen kommen. Beispiel: Die Bildgröße ist eine gerade Zahl, die Schriftgröße ist eine gerade Zahl und die Zeilenhöhe ist eine gerade Zahl. Wenn es eine ungerade Zahl ist, wird sie ausgerichtet, und wenn es eine ungerade Zahl ist, ist sie 1 Pixel höher.

Weitere Informationen finden Sie unter Ausrichtungsfehler bei der geraden-ungerade-Beziehung zwischen iconSize , fontSize und lineHeight

4. Ex-Geräte verwenden

Diese Methode habe ich in „CSS World“ von Zhang Xinxu gesehen. ex ist die Höhe des Kleinbuchstabens x. Damit kann der vertikale Ausrichtungseffekt von Inline-Elementen erzielt werden, der nicht von Schriftart und Schriftgröße beeinflusst wird. PS: Diese Methode eignet sich jedoch für Situationen, in denen die Symbolhöhe mit dem Text übereinstimmt, z. B. wenn nach dem Zeichen ein Pfeil hinzugefügt wird (zum Vergrößern klicken), was sehr praktisch ist.

.wrap img {
    Höhe: 1ex;
}

5. Verwendung der numerischen Methode der vertikalen Ausrichtung

Ich habe auch in Zhang Xinxus „CSS World“ gesehen, dass vertical-align numerische und prozentuale Werte verwenden kann.

Nehmen wir zum Beispiel das obige grundlegende Beispiel: Wenn die Bildhöhe 20px und die Textschriftgröße 22px beträgt

x, die Standardausrichtung ist die Grundlinie des Textes, sodass das Bild 2 Pixel nach oben verschoben wird. Zu diesem Zeitpunkt müssen Sie das Bild nur um 2 Pixel nach unten verschieben, um den Ausrichtungseffekt zu erzielen, und der numerische Typ des Attributs vertical-align weist eine gute Kompatibilität auf.

.wickeln {
            Breite: 100 %;
            Polsterung oben: 200px;
            Textausrichtung: zentriert;
            Rand: 20px automatisch;
            Schriftgröße: 22px;
            Höhe: 40px;
            
        }
        .wrap img {
            Breite: 20px;
            vertikale Ausrichtung: -2px;
        }

Damit ist dieser Artikel über mehrere Lösungen für die Ausrichtung von CSS-Datensatztextsymbolen abgeschlossen. Weitere relevante Inhalte zur Ausrichtung von CSS-Textsymbolen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!