Text und Icon vertikal zentrieren

[caramella]

Hallo, ich hoffe hier Hilfe für mein Problem zu finden.

Ich schaffe es nicht die Schrift auf die selbe Höhe wie das Icon zu bringen. Ich habe sehr viele Lösungsansätze gefunden, jedoch wird entweder das Icon mittig im Kreis angezeigt, oder die Schrift auf der richtigen Höhe. Ich experimentiere seit Stunden herum, jetzt habe ich leider keine Idee mehr was ich noch versuchen könnte. Kann mir jemand von euch helfen? Den Codeausschnitt habe ich hier hochgeladen. Liebe Grüße und danke

[TS]

Hello,

h2 {
       display: inline;
       vertical-align: middle;

	font-size: 4.5em;
	color: rgb(248,109,197);
	font-family: 'Indie Flower', cursive;
	margin-bottom: 1.6em;
}
~~~  

Das hatte ich eben gerade anders herum. Image vertikal in einem Div zentrieren…

Siehe oben



  
Liebe Grüße  
Tom S.   


-- 
 Es gibt nichts Gutes, außer man tut es   
 Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.  

[MrMurphy1]

Hallo

Ich sehe zu diesem HTML-Code

<h2><span class="fa fa-user"></span>User</h2>

das folgende CSS

h2 {
   color: rgb(248, 109, 197);
   font-family: 'Indie Flower', cursive;
   font-size: 4.5rem;
   display: flex;
   align-items: center;
}
h2 .fa {
   background-color: rgb(248, 109, 197);
   color: rgb(128, 128, 128);
   font-size: 2.5rem;
   width: 70px;
   height: 70px;
   border-radius: 100%;
   margin-right: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
}

Die Größenangaben können dann noch nach Wunsch angepasst werden.

Gruss

MrMurphy

[Auge]

Hallo

h2 {
   font-size: 4.5rem;
}
h2 .fa {
   font-size: 2.5rem;
   width: 70px;
   height: 70px;
   border-radius: 100%;
   margin-right: 1rem;
}

Die Größenangaben können dann noch nach Wunsch angepasst werden.

Die Größenangaben für width und height von h2 .fa sollten es sogar. Nicht, dass der Block wegen der Schriftgrößen von h2 und h2 .fa platzt. Meiner Meinung nach sollte als Einheit em verwendet werden, womit sich die Größe des resultierenden Kreises proportional zur Schriftgröße von h2 verändert, wenn sich die Schriftgröße, z.B. durch zoomen der Seite, verändern sollte. Als Anfangswert, um sich and as richtige Größenverhältnis zwischen Schrift und Grundfläche des Icons heranzutasten, wäre mMn 2emfür width und height geeignet.

Tschö, Auge

[MrMurphy1]

Hallo

z.B. durch zoomen der Seite, verändern sollte

Schade. Wenn du mein Beispiel ausprobiert hättest könntest du nachvollziehen das ein Zoomen nix unproportional ändert. Die Möglichkeit besteht eher bei em-Angaben.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Schade. Wenn du mein Beispiel ausprobiert hättest könntest du nachvollziehen das ein Zoomen nix unproportional ändert. Die Möglichkeit besteht eher bei em-Angaben.

Schade. Deine Abneigung gegenüber em ist genau unsinnig wie deine Abneigung gegenüber table.

LLAP 🖖

[caramella]

Danke für die Hilfe, beides funktioniert 😀 Ich möchte nicht lästig sein, aber zu dem Code von Mr.Murphy hätte ich noch zwei Fragen:

1. Gibt es einen speziellen Grund das <span> Element anstatt <i> zu verwenden.

2. Das ist ja mit Flexbox umgesetzt. Ich habe die Seite aber mit altmodischem CSS, floats und einem Gridsystem gemacht. Ich hätte schon desöftern versucht mich mit Flexbox anzufreunden, aber bisher bin ich daran immer gescheitert. Nur der Ordnung halber, ist es schlimm nur einen Teil einer Seite mit Flexbox umzusetzen oder müsste ich dann alles umschreiben?

Liebe Grüße und nochmals Danke

[Gunnar Bittersmann]

@@caramella

1. Gibt es einen speziellen Grund das <span> Element anstatt <i> zu verwenden.

Ja, das i-Element hat eine Bedeutung; und diese ist nicht „Icon“.

Der Missbrauch von i für Icon ist fehlerhaftes HTML.

LLAP 🖖

[MrMurphy1]

Hallo

Gibt es einen speziellen Grund das <span> Element anstatt <i> zu verwenden.

Keinen technischen. Das i-Element hat aber in der Struktur eine bestimmte Bedeutung, die in dem Beispiel nicht zu erkennen ist. Das span-Element ist neutral und passt deshalb besser.

ist es schlimm nur einen Teil einer Seite mit Flexbox umzusetzen oder müsste ich dann alles umschreiben?

Nein, überhaupt nicht.

Gruss

MrMurphy