Zentrieren h1 in einer Kopfzeile

Ich möchte mein h1 Element in der Kopfzeile zentrieren, aber es wird einfach nicht funktionieren. Es sollte in der Mitte des 450px-Headers sein, während die Navigationsleiste oben rechts bleibt. Und wenn möglich, möchte ich oben links ein Logo anbringen. Ich habe es mit Ausrichtung, Position und Rand Auto versucht. Wenn jemand helfen könnte und mir meinen Fehler zeigen könnte, wäre das nett, danke.Zentrieren h1 in einer Kopfzeile

body { 
 
    background-color: #999; 
 
    font-family: times; 
 
} 
 
header { 
 
    height: 450px; 
 
    background: url(../Pictures/Flensburg.jpg) center center fixed; 
 
    background-size: cover; 
 
} 
 
nav { 
 
    float: right; 
 
    30px 30px 0 0; 
 
} 
 
ul{ 
 
    display: inline; 
 
    align: right; 
 
    list-style-type: none; 
 
    padding: 10px 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 10px 
 
} 
 
a { 
 
    background-color: #b3b3b3; 
 
    color: white; 
 
    text-transform: uppercase; 
 
} 
 
h1 { 
 
    font-size: 72px 
 
    width: 100% 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Keanu</title> 
 
    <link href="CSS/Main.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <header> 
 
    <nav> 
 
     <ul> 
 
    <li><a href="Index.html">Home</a></li> 
 
    <li><a href="About Me.html">About Me</a></li> 
 
    <li><a href="Portfolio.html">Portfolio</a></li> 
 
    <li><a href="Testimonial.html">Testimonial</a></li> 
 
    <li><a href="Contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
    <h1>My Personal Website</h1> 
 
</header> 
 
<footer> 
 

 
</footer> 
 
    </body> 
 
</html>

Quelle

2017-02-25 Keanu

Soll das nav und die h1 in derselben Zeile stehen? Kannst du ein Bild hochladen mit dem, was du erreichen willst? – andreas

Zunächst sollten Sie sicherstellen, dass Ihr Markup und CSS-Regeln gültig sind. Eine Regel align: right, d. H. Existiert nicht in CSS. Außerdem hast du in deinen h1 CSS-Regeln eine ; vergessen.

Um Ihre h1 zu zentrieren, können Sie einfach text-align: center; darauf setzen, während Sie das nav Element display: block; machen, damit es in seiner eigenen Zeile bleibt.

body { 
 
    background-color: #999; 
 
    font-family: Times; 
 
} 
 

 
header { 
 
    height: 450px; 
 
    background: url(../Pictures/Flensburg.jpg) center center fixed; 
 
    background-size: cover; 
 
} 
 

 
ul { 
 
    display: block; 
 
    text-align: right; 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 

 
a { 
 
    background-color: #b3b3b3; 
 
    color: white; 
 
    text-transform: uppercase; 
 
} 
 

 
h1 { 
 
    font-size: 72px; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="Index.html">Home</a></li> 
 
     <li><a href="About Me.html">About Me</a></li> 
 
     <li><a href="Portfolio.html">Portfolio</a></li> 
 
     <li><a href="Testimonial.html">Testimonial</a></li> 
 
     <li><a href="Contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
    <h1>My Personal Website</h1> 
 
</header>

Quelle

2017-02-25 17:03:02 andreas

Versuchen Hinzufügen display: inline-block;, text-align: center; und width: 100%; zum h1 Überschrift.

h1 { 
    font-size: 72px; 

    width: 100%; 
    display: inline-block; 
    text-align: center; 
}

Voll Edited Code unten:

body { 
 
    background-color: #999; 
 
    font-family: times; 
 
} 
 
header { 
 
    height: 450px; 
 
    background: url(../Pictures/Flensburg.jpg) center center fixed; 
 
    background-size: cover; 
 
} 
 
nav { 
 
    float: right; 
 
    30px 30px 0 0; 
 
} 
 
ul{ 
 
    display: inline; 
 
    align: right; 
 
    list-style-type: none; 
 
    padding: 10px 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 10px 
 
} 
 
a { 
 
    background-color: #b3b3b3; 
 
    color: white; 
 
    text-transform: uppercase; 
 
} 
 
h1 { 
 
    font-size: 72px; 
 
    width: 100%; 
 
    display: inline-block; 
 
    text-align: center; 
 
}

<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="Index.html">Home</a></li> 
 
     <li><a href="About Me.html">About Me</a></li> 
 
     <li><a href="Portfolio.html">Portfolio</a></li> 
 
     <li><a href="Testimonial.html">Testimonial</a></li> 
 
     <li><a href="Contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
    <h1>My Personal Website</h1> 
 
</header> 
 
<footer> 
 

 
</footer>

Quelle

2017-02-25 17:03:13

Ich konnte ein paar der Probleme mit den folgenden CSS-Anpassungen beheben:

1) Zugabe Breite: 100% an Ihr Navigationselement

2) hinzufügen ing Breite: 100% auf Ihre h1-Element

3) das Hinzufügen von Text-align: center auf Ihre h1-Element

Quelle

2017-02-25 17:04:23

body { 
 
    background-color: #999; 
 
    font-family: times; 
 
} 
 
header { 
 
    height: 450px; 
 
    background: url(../Pictures/Flensburg.jpg) center center fixed; 
 
    background-size: cover; 
 
} 
 
nav { 
 
    float: right; 
 
    30px 30px 0 0; 
 
} 
 
ul{ 
 
    display: inline; 
 
    align: right; 
 
    list-style-type: none; 
 
    padding: 10px 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 10px 
 
} 
 
a { 
 
    background-color: #b3b3b3; 
 
    color: white; 
 
    text-transform: uppercase; 
 
} 
 
h1 { 
 
    font-size: 72px 
 
    width: 100%; 
 
text-align:center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Keanu</title> 
 
    <link href="CSS/Main.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <header> 
 
    <nav> 
 
     <ul> 
 
    <li><a href="Index.html">Home</a></li> 
 
    <li><a href="About Me.html">About Me</a></li> 
 
    <li><a href="Portfolio.html">Portfolio</a></li> 
 
    <li><a href="Testimonial.html">Testimonial</a></li> 
 
    <li><a href="Contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
    <h1>My Personal Website</h1> 
 
</header> 
 
<footer> 
 

 
</footer> 
 
    </body> 
 
</html>

Quelle

2017-02-25 17:06:03

Ihr Problem stammt ursprünglich aus dem <nav> schwebte. Sie haben den Float nicht gelöscht, was bedeutet, dass das folgende Element (h1) vom floated-Nav beeinflusst wird.

Hinzufügen eines Div mit clear:both nach Ihrem </nav> löst das Problem. Wie jedoch von den anderen angegeben, haben Sie immer noch eine Menge Fehler in Ihrem Code (fehlende Semikolons und eine Rand- oder Auffülllinie, die nur die Zahlen und nicht die eigentliche Gestaltungseigenschaft enthält) und Sie müssen immer noch eine anwenden Dein h1, wenn der Text zentriert werden soll. Ich habe das korrigiert und im Code darunter getan.

body { 
 
    background-color: #999; 
 
    font-family: times; 
 
} 
 
header { 
 
    height: 450px; 
 
    background: url(../Pictures/Flensburg.jpg) center center fixed; 
 
    background-size: cover; 
 
} 
 
nav { 
 
    float: right; 
 
    /* The previous line beneath was "30px 30px 0 0;" - I assumed you wanted a margin. Change if not */ 
 
    margin: 30px 30px 0 0; 
 
} 
 
ul{ 
 
    display: inline; 
 
    align: right; 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 
a { 
 
    background-color: #b3b3b3; 
 
    color: white; 
 
    text-transform: uppercase; 
 
} 
 
h1 { 
 
    font-size: 72px; 
 
    width: 100%; 
 
text-align:center; 
 
} 
 
.clear{ 
 
clear:both; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Keanu</title> 
 
    <link href="CSS/Main.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <header> 
 
    <nav> 
 
     <ul> 
 
    <li><a href="Index.html">Home</a></li> 
 
    <li><a href="About Me.html">About Me</a></li> 
 
    <li><a href="Portfolio.html">Portfolio</a></li> 
 
    <li><a href="Testimonial.html">Testimonial</a></li> 
 
    <li><a href="Contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
<div class="clear"></div> 
 
    <h1>My Personal Website</h1> 
 
</header> 
 
<footer> 
 

 
</footer> 
 
    </body> 
 
</html>

Edit:
Beachten Sie, dass, wenn Sie nicht den Schwimmer löschen und Ihre Fehler im CSS korrigieren, wodurch eine Schriftgröße von 72px bekommen, ist es, als ob die Elemente angezeigt sind richtig ausgerichtet.Allerdings liegt Ihr h1 immer noch hinter Ihrer nav und das Problem ist eigentlich nicht behoben. Wenn Sie die Schriftgröße verringern, wird das Problem erneut angezeigt.

Quelle

2017-02-25 17:15:25

Zentrieren h1 in einer Kopfzeile

Antwort

Verwandte Themen