Centering h1 in a header
Question
I wanna center my h1 element in the header, but it just won't work. It should be in the middle of the 450px header, while the nav bar stays at the right top. And if possible I wanna put in a logo at the top left. I've tried it with align, position and margin auto. If anyone could help and show me my error, that'll be nice, thanks.
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>
5 answers
solution1
0 ACCPTED 2017-02-25 17:03:02
First, you should make sure, that your markup and your CSS rules are valid. A rule align: right ie doesn't exist in CSS. Also you forgot a ; in your h1 CSS rules.
To center your h1, you can just put text-align: center; on it, while making the nav element display: block; to let it stay in its own line.
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>
solution2
0 2017-02-25 17:03:13
Try adding display: inline-block; , text-align: center; and width: 100%; to the h1 heading.
h1 {
font-size: 72px;
width: 100%;
display: inline-block;
text-align: center;
}
Full Edited code below:
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>
solution3
0 2017-02-25 17:04:23
I was able to fix a couple of the issues with the following css adjustments:
1) adding width: 100% to you nav element
2) adding width:100% to your h1 element
3) adding text-align: center to your h1 element
solution4
0 2017-02-25 17:06:03
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>
solution5
0 2017-02-25 17:15:25
Your problem originally stems from your floated <nav> . You haven't cleared the float, meaning that the following element (the h1) is influenced by the floated nav.
Adding a div with clear:both after your </nav> solves the problem. However, as pointed out by the others, you still have a lot of errors in your code (missing semicolons and a margin or padding line which only includes the numbers, and not the actual styling property) and you still need to apply a text-align:center to your h1 if you want the text to be centered. I've corrected and done this in the code beneath.
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:
Note that if you do not clear the float and correct your errors in the css, thereby getting a font-size of 72px, it will appear as if the elements are aligned correctly. However your h1 will still lie behind your nav and the problem isn't actually fixed. If you choose to decrease the font size, the problem will appear again.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.