caramella: Text und Icon vertikal zentrieren

problematische Seite

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

  1. problematische Seite

    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.  
    
    
    
    
    
    
    
  2. problematische Seite

    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

    1. problematische Seite

      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

      --
      Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
      Toller Dampf voraus von Terry Pratchett
      1. problematische Seite

        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

        1. problematische Seite

          @@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 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  3. problematische Seite

    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

    1. problematische Seite

      @@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 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    2. problematische Seite

      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