Ausrichten eines Bildes mit Text

Ich erstelle eine sehr einfache Platzhalter-Website. Zentriert in der Mitte der Seite sollte es lesen:Ausrichten eines Bildes mit Text

(Firmenlogo) WEBSITE IN 2018 COMING

Das Firmenlogo die gleiche Schriftart wie der Text verwendet.

Standardmäßig befindet sich das Bild neben dem Text, aber das ändert sich, wenn ich versuche, es zentral auszurichten.

body { 
 
    background-color: #fff; 
 
    background-size: cover; 
 
    text-align: center; 
 
} 
 

 
img { 
 
    float: left; 
 
    width: 350px; 
 
} 
 

 
h1 { 
 
    position: relative; 
 
    top: 18px; 
 
    left: 10px; 
 
}

<body> 
 
    <div class="header"> 
 
    <img src="http://via.placeholder.com/350x100" alt="logo" /> 
 
    <h1>WEBSITE COMING IN 2018</h1> 
 
    </div> 
 
</body>

Was wäre der effektivste Weg, dies zu tun?

Quelle

2017-11-13 Sam Johnson

Denken Sie daran, die Floats mit Inline-Block zu entfernen. Ich würde auch text-align: center in die Header-Klasse verschieben, außer wenn die gesamte Seite zentriert werden soll. –

Offensichtlich ist dies keine Lösung und könnte außerhalb Ihrer Kontrolle liegen, aber ich denke, es ist erwähnenswert, dass es im Allgemeinen besser ist, den Benutzer zu einem bestehenden Inhalt zu führen, anstatt eine "Website kommt bald" -Seite anzuzeigen. Wenn es noch nicht gebaut wurde, warum kann der Benutzer dorthin gehen? – DBS

@dbs Ich verstehe, was du meinst, aber ich denke, die Idee ist, dass Benutzer auf die Website gehen und sich für ein Update anmelden können, wenn es online geht. –

Man könnte dies mit nähern flexbox

body { 
 
    background-color: #fff; 
 
    background-size: cover; 
 
    /* added */ 
 
    margin: 0; 
 
    height: 100%; 
 
    height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.header { 
 
    display: flex; 
 
    text-align: center; 
 
    align-items: center; 
 
}

<body> 
 
    <div class="header"> 
 
    <img src="http://via.placeholder.com/350x100" alt="logo" /> 
 
    <h1>WEBSITE COMING IN 2018</h1> 
 
    </div> 
 
</body>

Quelle

2017-11-13 14:42:36 sol

können Sie display: flex; verwenden, wie auf Ihrem .header Element folgt

body { 
 
    background-color: #fff; 
 
} 
 

 
img { 
 
    width: 200px; 
 
} 
 

 
h1 { 
 
    margin-left: 10px; 
 
    line-height: 100%; 
 
} 
 

 
.header { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<body> 
 
    <div class="header"> 
 
    <img src="http://via.placeholder.com/350x100" alt="logo" /> 
 
    <h1>Website Coming in 2018</h1> 
 
    </div> 
 
</body>

Hinweis: Der geringfügige vertikale Versatz des Textes ist auf den Raum unterhalb seiner Grundlinie zurückzuführen, der für Buchstaben wie j, g, p usw. reserviert ist, die sich unterhalb der Grundlinie erstrecken. Sobald Sie einen dieser Buchstaben in Ihrem Text verwenden, wird er perfekt zentriert. Ich habe den Großbuchstaben in den normalen Textmodus geändert, um dies zu demonstrieren.

Quelle

2017-11-13 14:46:08 Johannes

Ausrichten eines Bildes mit Text

Antwort

Verwandte Themen