Was soll ich tun, wenn der Text hinter dem CSS-Bild nicht zentriert werden kann?

Die Lösung für das Problem, dass der Text hinter dem CSS-Bild nicht zentriert werden kann: Erstellen Sie zunächst eine HTML-Beispieldatei. Fügen Sie dann dem Bild und dem Text den Stil „vertikal-align: middle“ hinzu .

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, Thinkpad T480-Computer.

Empfohlen: „CSS-Video-Tutorial“

Der Text hinter dem CSS-Bild kann nicht zentriert werden?

Zum Beispiel möchte ich jetzt einen einfachen Löschknopf erstellen, der nur aus einem Symbol und dem Wort „ delete“ haben Sie 30 Sekunden Zeit, um darüber nachzudenken, wie Sie das Layout gestalten möchten.

Okay, zeigen Sie zuerst den HTML-Code wie folgt an:

<div class="del"><span class="icon"></span><span>删除</span></div>

Es ist ganz einfach, es gibt zwei Span-Tags unter einem div-Element mit der Klasse del. Natürlich können Sie das Symbol auch direkt durch ein Pseudoelement ersetzen (ich weiß nicht). Ich weiß noch nichts über die Wandverkleidung aus Pseudoelementen. Denken Sie an die Vergangenheit...).

Als nächstes könntest du CSS so schreiben:

.del {
font-size: 18px;
}
.del .icon {
display: inline-block;
width: 16px;
height: 24px;
margin-right: 5px;
background: url("imgs/delete.png") no-repeat center;
background-size: 100%;
}

Dann sieht es so aus:

咦? Es scheint anders zu sein, als ich es mir vorgestellt habe! Warum können Bilder und Text nicht vertikal ausgerichtet werden? Warum?

Das liegt daran, dass Bilder und Text standardmäßig vertikal innerhalb der Linie basierend auf der Grundlinie ausgerichtet sind. Die Grundlinie des Bildes befindet sich am unteren Rand des Bildes, die Grundlinie des Textes liegt jedoch unterhalb der Textmitte. es wird also wie oben dargestellt angezeigt. Wie kann man dieses Problem lösen?

Es ist ganz einfach, wir müssen nur Vertical-Align: Middle zum Bild bzw. Text hinzufügen:

.del .icon {
display: inline-block;
width: 18px;
height: 24px;
margin-right: 5px;
vertical-align: middle;
background: url("imgs/delete.png") no-repeat center;
background-size: 100%;
}
.del span {
vertical-align: middle;
}

In diesem Fall werden Bild und Text an ihrer Mittellinie ausgerichtet:

Anleitung:

vertical Das Attribut -align legt die vertikale Ausrichtung eines Elements fest. Das Attribut

vertical-align definiert die vertikale Ausrichtung der Grundlinie eines Inline-Elements relativ zur Grundlinie der Linie, in der sich das Element befindet. Ermöglicht die Angabe negativer Längenwerte und Prozentwerte. Dadurch wird das Element abgesenkt, anstatt es anzuheben. In Tabellenzellen legt diese Eigenschaft die Ausrichtung des Zellinhalts im Zellfeld fest.

Verwenden Sie Vertical-Align:Middle, um das Element in der Mitte des übergeordneten Elements zu platzieren.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn der Text hinter dem CSS-Bild nicht zentriert werden kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!