Lösen Sie das Problem, dass Zeilenhöhe = Elementhöhe, der Text aber nicht vertikal zentriert ist

Lassen Sie mich zunächst erklären, warum der Text nicht vertikal zentriert ist, wenn die Zeilenhöhe gleich der Elementhöhe ist. Tatsächlich ist der Text nicht wirklich zentriert, wenn die Zeilenhöhe gleich der Elementhöhe ist, sondern sieht zentriert aus. Wenn der Unterschied zwischen der Elementhöhe und der Schriftgröße groß ist, ist dies immer deutlicher. Hier können Sie nachlesen: Was ist eine Grundlinie?

Die grüne Linie im Bild unten ist die Grundlinie: Zeilenhöhe bezeichnet den Abstand zwischen zwei Textzeilen [Grundlinie]

Lösung 1:

Kombinieren von Zeilenhöhe, Ausrichtung und Pseudoelementen

.Text{
  Breite: 16px; 
  Höhe: 16px;
  Schriftgröße: 10px;
  Textausrichtung: zentriert;
}
.text::nach{
  Inhalt: ' ';
  Anzeige: Inline-Block;
  Breite: 0;
  Höhe: 100%;
  vertikale Ausrichtung: Mitte;
  Rand oben: 1px;
}

Lösung 2:

Verwenden Sie die CSS3-Skalierungseigenschaft, um alle Werte auf die doppelte Größe einzustellen und dann die Größe zu verdoppeln.

.Text{
  Breite: 32px; 
  Höhe: 32px;
  Zeilenhöhe: 32px;
  Schriftgröße: 20px;
  Textausrichtung: zentriert;
  transformieren: Skalierung (0,5);
}

Dies ist das Ende dieses Artikels zur Lösung des Problems „line-height=height element height“, aber Text ist nicht vertikal zentriert. Weitere relevante Inhalte zu „line-height=height element height“ finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!