CODEWITHSUNDEEP
htmlcsscenter
nosh
nosh

Reputation: 682

How do I center header text in the middle of the navigation menu in html

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>

Upvotes: 3

Views: 56554

Answers (5)

Sastra 2003
Sastra 2003

Reputation: 1

var text = new createjs.Text(

"the longer I'm with you\

nthe more I love you",

"bold 24px Arial", "#fff");

text.textAlign = "center";

text.x = w / 2;

text.yh/2 text.

getMeasuredLineHeight();

stage.addChild(text);

Upvotes: 0

Salman Sabir
Salman Sabir

Reputation: 26

  1. I think you dont need to put <center> tag in the header, align it with css.
  2. and also when you are using your own class you should remove the <header> tag .
  3. You are using 100% width in header so you should not use left:0;
  4. 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>

Upvotes: 0

user2230470
user2230470

Reputation:

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>

Upvotes: 12

Kenneth
Kenneth

Reputation: 49

Try (Your code here) . Replace : (Your code here) with waht ever you want int he centre.

Upvotes: -1

Cassidy
Cassidy

Reputation: 3408

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:

https://jsfiddle.net/xqamjrvr/

Upvotes: 2

Related Questions