Box verschiebt zentrierten Text nach rechts

[Achim]

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

[Gunnar Bittersmann]

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

[Achim]

Dankeschön!