• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Icon an die Höhe des nachfolgendes Textes anpassen

H

Habanero

Neues Mitglied
Hallo,

ich bastel gerade an einem Webinterface, es soll ein paar kleine Icons eingefügt werden. Die Ober- und Unterkante sollen die gleiche Höhe haben wie der nachfolgende Text. Hier ein Bsp.

HTML: 
<!DOCTYPE html>
<html>
<head>
<style>
div {
  display: flex;
  align-items: center;
  justify-content: center;
}
span {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-size: 5em;
}
img {
height: 5em;
}
</style>
</head>
<body>
<div>
<img src="battery3.png">
<span>A1</span>
</div>
</body>
</html>

Ich bekomme das mit "height: 3.8em" als Icon-Höhe halbwegs korrekt ausgerichtet. Es müsste doch aber auch anders gehen? Blende ich einen Background für das Span-Element ein sieht man, dass es höher als der Text ist. Das liegt wohl daran, dass die Texthöhe und Höhe der Buchstabenlinien nicht gleich sind. Das soll sich laut Gemini-AI mit "line-height: 5em;" im Span-Element ändern lassen - was aber nicht geht. Es tut sich nichts.

Jetzt stehe ich auf dem Schlauch. Was mache ich hier falsch?

Grüße
Habanero
 
Das liegt wohl daran, dass die Texthöhe und Höhe der Buchstabenlinien nicht gleich sind.
Zum Vergrößern anklicken....
Genau, es wird sicher klarer wenn Du dir diese Beschreibung ansiehst:

Liniensystem (Typografie) – Wikipedia

de.wikipedia.org de.wikipedia.org
oder noch etwas präziser hier:
stackoverflow.com

When setting a font-size in CSS, what is the real height of the letters?

There is a similar question here whose answer in essence says: The height - specifically from the top of the ascenders (e.g., 'h' or 'l' (el)) to the bottom of the descenders (e.g., 'g' or 'y') T...
stackoverflow.com stackoverflow.com

Mir ist kein Weg bekannt, mit CSS die Höhe der Klein- oder Großbuchstaben zu ermitteln. Insofern machst Du nichts falsch wenn du die Höhe des Bildes explizit fest legst.

Wenn Du nur Großbuchstaben ohne Unterlängen hast, kannst Du dir noch zu Nutze machen, dass der Default-Wert für die vertikale Ausrichtung "baseline" ist. Dann ist die Unterkante des Bildes präzise an der der Buchstaben aus gerichtet. Funktioniert allerdings nur ohne Flexlayout. Ich habe das hier mal umgesetzt und gleichzeitig figure-figcaption benutzt:
Code: 
<!DOCTYPE html>
<html>

<head>
    <style>
        figure {
            margin: 0;
            padding: 0;
        }

        figcaption {
            padding: 0;
            margin: 0;
            display: inline-block;
            font-size: 5em;
        }

        img {
            display: inline-block;
            height: calc(5em * 0.7);
        }
    </style>
</head>

<body>
    <figure>
        <img src="images/buttondown.png">
        <figcaption>A1</figcaption>
    </figure>
</body>

</html>

Generell ist es ein wenig knifflig eine Grafik so einzurichten, dass sie optisch gut zum Text passt. Mein Beispiel sieht z. B. nicht mehr gut aus wenn Du auch Zeichen mit Unterlängen benutzt.
 
  • Angry
Reaktionen: msi
Habanero schrieb:
Hallo,

ich bastel gerade an einem Webinterface, es soll ein paar kleine Icons eingefügt werden. Die Ober- und Unterkante sollen die gleiche Höhe haben wie der nachfolgende Text. Hier ein Bsp.

HTML: 
<!DOCTYPE html>
<html>
<head>
<style>
div {
  display: flex;
  align-items: center;
  justify-content: center;
}
span {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-size: 5em;
}
img {
height: 5em;
}
</style>
</head>
<body>
<div>
<img src="battery3.png">
<span>A1</span>
</div>
</body>
</html>

Ich bekomme das mit "height: 3.8em" als Icon-Höhe halbwegs korrekt ausgerichtet. Es müsste doch aber auch anders gehen? Blende ich einen Background für das Span-Element ein sieht man, dass es höher als der Text ist. Das liegt wohl daran, dass die Texthöhe und Höhe der Buchstabenlinien nicht gleich sind. Das soll sich laut Gemini-AI mit "line-height: 5em;" im Span-Element ändern lassen - was aber nicht geht. Es tut sich nichts.

Jetzt stehe ich auf dem Schlauch. Was mache ich hier falsch?





Ich habe kürzlich eine Karte mit einem Batteriesymbol und A1-Text erstellt. Das Symbol sollte exakt die gleiche Höhe wie die Buchstaben haben, aber der Text war aufgrund der Ober- und Unterlängen immer etwas höher. Ich habe es mit `align-items: baseline` und `flex` versucht, letztendlich aber die Symbolhöhe manuell an die em-Einheit angepasst. Das Ergebnis ist flüssig und sauber und sieht jetzt professionell aus. Um eine Pause von diesen CSS-Problemen zu haben und mich auf die eigentliche Aufgabe zu konzentrieren, habe ich wisspro beauftragt, mir beim Kapitel meiner Masterarbeit über Webtechnologien zu helfen. Der Text ist klar und übersichtlich geworden, mit korrekter Struktur und Verlinkungen. Das hat mir die Kraft gegeben, mit neuen Ideen und ganz entspannt ans Designen zurückzukehren. Solche Unterstützung beschleunigt den Fortschritt im Studium und bei Hobbys enorm!


Grüße
Habanero
Zum Vergrößern anklicken....
Ich habe kürzlich eine Karte mit einem Batteriesymbol und A1-Text erstellt. Das Symbol war aufgrund von Ober- und Unterlängen immer etwas höher oder tiefer positioniert. Ich habe verschiedene Optionen wie „Grundlinie“, „Flexibel“ und „Vertikal ausrichten“ ausprobiert – schließlich habe ich die Höhe des Symbols manuell an die Höhe des Textes angepasst. Jetzt ist es perfekt ausgerichtet und sieht sauber und professionell aus.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben