How do I center header text in the middle of the navigation menu in html
Question
I am wondering how to center the header text I wrote in the center of the navigation menu that I created, the text is already centered but it is centered at the top of the navigation menu, not in the middle, which is what I need.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<style>
body {margin:0;}
.Header {
z-index: 100;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #000000;
height: 70px;
}
@media screen and (max-width:680px) {
.Header.responsive {position: relative;}
.Header.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
}
@media (max-width: 960px){
.Header .headerLogo{
display: inline-block;
width: 86px;
height: 15px;
margin-top: 17px;
margin-left: 6px;
}
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<header><center><i><font size = "6" face = "verdana" color = "white">Lunation Boards</font></i></center></header>
</a>
</div>
</body>
</html>
4 answers
solution1
3 ACCPTED
You have three options, whereby the first two options are a lot more reliable .
The first option uses flex-box to center the item horizontally and vertically.
div { width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; background: blue; } text { background: orange; }
<div> <text>Centered horizontally and vertically</text> </div>
The second option, instead of using flex-box, uses a relative position for the parent element, an absolute position for the child element, and transform: translate(X, Y) also for the child.
div { width: 100%; height: 200px; position: relative; background: blue; } text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: orange; }
<div> <text>Centered horizontally and vertically</text> </div>
The third option, in order to center the element vertically, uses a line-height that is equal to the height of the parent element.
div { width: 100%; height: 200px; position: relative; background: blue; } text { position: absolute; left: 50%; transform: translateX(-50%); line-height: 200px; background: orange; }
<div> <text>Centered horizontally and vertically</text> </div>
solution2
1 2017-02-17 20:15:12
This should do the trick.
To clean up your HTML, set it up like this and remove tags like <center> and <font> :
<div class="Header" id="myHeader">
<a class = "headerLogo">
<h1>Lunation Boards</h1>
</a>
</div>
And you can use display: flex to center things in your header:
.Header {
z-index: 100;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #000000;
height: 70px;
display: flex;
justify-content: center;
}
a {
width: 100%;
}
h1 {
margin: 0;
color: #fff;
}
@media (max-width: 960px){
.Header .headerLogo {
display: inline-block;
width: 86px;
height: 15px;
margin-left: 6px;
}
}
Here's the full fiddle with the changes:
solution3
0 2017-02-17 20:18:44
Try (Your code here) . Replace : (Your code here) with waht ever you want int he centre.
solution4
0 2017-02-17 20:40:58
- I think you dont need to put
<center>tag in the header, align it with css. - and also when you are using your own class you should remove the
<header>tag . - You are using 100% width in header so you should not use left:0;
- You need to use position: relative in headerlogo class with margin: 0 auto;
I have used html and css so far, but i think it will help
Here is the sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<style>
body {margin:0;}
.Header {
z-index: 100;
position: fixed;
top: 0;
width: 100%;
background-color: #000000;
height: 70px;
}
@media screen and (max-width:680px) {
.Header.responsive {position: relative;}
.Header.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
}
@media (max-width: 960px){
.Header .headerLogo{
position: relative;
display: inline-block;
width: 86px;
height: 15px;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<i><font size = "6" face = "verdana" color = "white">Lunation Boards</font></i>
</a>
</div>
</body>
</html>
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.