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.
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
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
