So erreichen Sie die Ausrichtung von Textsymbolen mit CSS

In der Entwicklung ist es am häufigsten, wenn Bilder und Text in einer Zeile angezeigt werden. Manchmal ist die Ausrichtung am häufigsten. Es gibt immer noch einige Abweichungen Schauen wir uns zunächst das einfachste Beispiel an:

HTML-Teil:

<div class="wrap">
    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">
    xx测试对齐Style-
</div>

Empfohlenes Tutorial: CSS-Einführungs-Tutorial

CSS-Teil:

.wrap {
      width: 300px;
      text-align: center;
      margin: 20px auto;
      font-size: 14px;
 }
 .wrap img {
      width: 20px;
 }

Der Effekt, wenn keine Ausrichtung verwendet wird, ist wie folgt:

Die Standardausrichtung ist Grundlinie, außerdem ist es die untere Zeile des x-Buchstabens.

Damit ist auch die erste Frage beantwortet. Wenn die Bilder und der Text des Browsers nicht zusätzlich festgelegt sind, basieren sie auf dem unteren Rand des Kleinbuchstabens x, der vertikal ausrichtet:baseline;.

Mehrere gängige Zentrierungslösungen

1. Verwenden Sie die vertikale Ausrichtung in der Mitte.

.wrap {
    vertical-align: middle;
    }
.wrap img {
    vertical-align: middle;
}

Wenn wir die häufig verwendete vertikale Ausrichtung zum Ausrichten von Text und Bildern verwenden, ist dies tatsächlich der Fall gleich Es gibt eine gewisse Abweichung, wie im Bild unten gezeigt:

Der Mittelwert von Vertical-Align ist tatsächlich relativ zur halben Höhe des Kleinbuchstabens x, also Das Bild folgt x und beginnt, sich in der Mitte auszurichten. Bei anderen Zeichen wie S und Chinesisch werden Sie jedoch feststellen, dass es ohnehin eine leichte Abweichung gibt und das Bild relativ niedriger ausfällt.

2. Verwenden Sie Vertical-Align und Span, um den Text umzubrechen.

Lassen Sie uns eine kleine Änderung vornehmen, den Textteil mit dem Span-Tag umbrechen und die Stilausrichtung Vertical-Align: Middle verwenden Spanne. Sie werden feststellen, dass sich das Bild zu diesem Zeitpunkt etwas nach oben bewegt.

Der Effekt ist wie folgt:

3. Flex-Layout verwenden

display: flex;
align-items: center;

Aber sogar Wenn es sich um ein Flex-Layout handelt, kommt es manchmal zu geringfügigen Abweichungen, zum Beispiel: Die Bildgröße ist eine gerade Zahl, die Schriftgröße ist eine gerade Zahl, die Zeilenhöhe wird ausgerichtet, wenn sie eine gerade Zahl ist eine ungerade Zahl, sie ist 1 Pixel höher.

4. Verwenden Sie die Einheit ex

ex ist die Höhe des Kleinbuchstabens x, die für die vertikale Mittelausrichtung von Inline-Elementen verwendet werden kann, die nicht von Schriftarten und Schriftgrößen beeinflusst werden.

PS: Dies ist jedoch sehr praktisch, wenn die Höhe des Symbols mit der des Textes übereinstimmt, beispielsweise wenn nach dem Zeichen ein Pfeil hinzugefügt wird (zum Vergrößern anklicken).

.wrap img {
    height: 1ex;
}

5. Verwendung der vertikal ausrichtenden numerischen Methode

Beim vertikal ausrichtenden Attributwert handelt es sich beispielsweise immer noch um den oben genannten Grundfall: wenn die Bildhöhe beträgt 20 Pixel. Wenn die Textschriftgröße 22 Pixel beträgt, ist die Standardausrichtung die Grundlinie des Textes, sodass das Bild 2 Pixel höher ist. Zu diesem Zeitpunkt müssen Sie das Bild nur um 2 Pixel nach unten versetzen, um den Ausrichtungseffekt zu erzielen Der numerische Typ des Vertical-Align-Attributs weist eine sehr gute Kompatibilität auf.

.wrap {
            width: 100%;
            padding-top: 200px;
            text-align: center;
            margin: 20px auto;
            font-size: 22px;
            height: 40px;
            
        }
        .wrap img {
            width: 20px;
            vertical-align: -2px;
        }

Empfohlene verwandte Video-Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo erreichen Sie die Ausrichtung von Textsymbolen mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!