Achim: Box verschiebt zentrierten Text nach rechts

Moin,

Ich möchte im Header das Logo links haben, den Text exakt in der Mitte. Durch das logo links verschiebt sich der Text aber nach rechts. Wie bekomme ich den Text exakt in die Mitte?

<header>
    <div id="logo">
    <img src="img/logo.png" width="180">            
    </div>
    <h1 id="menu">Lorem ipsum</h1>
</header> 
header {
    text-align: center;
}

#logo {
    float: left;
}

Liebe Grüße

  1. @@Achim

    Ich möchte im Header das Logo links haben, den Text exakt in der Mitte. Durch das logo links verschiebt sich der Text aber nach rechts. Wie bekomme ich den Text exakt in die Mitte?

    Mit CSS Grid: 3 Spalten, wobei die erste und dritte (leere) Spalte gleich breit sind. ☞ Guckst du.

    <header>
        <div id="logo">
        <img src="img/logo.png" width="180">            
        </div>
    

    Hier fehlt das notwendige alt-Attribut. Bei dekorativen Bildern: alt=""; sonst Alternativtext, welcher das Bild für alle Nutzer beschreibt, die das Bild nicht sehen können, sei es, weil das Bild nicht geladen wird oder weil sie blind sind.

    In meinem Bespiel wäre es unsinnig, als Alternativtext „Logo für Menschenrechte“ zu verwenden, denn genau das steht ja schon im Text daneben.

    😷 LLAP

    --
    „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
    — Joachim Gauck über Impfgegner
    1. Dankeschön!