Text-Align: Center not centering properly

Question

I am trying to create a navbar with a centered title and links to other pages on the site on the right, but the title does not seem to be centering, even when I am using text-align: center. In order to keep the title and links to other pages on the same line, I am using a flexbox. Is there something wrong with this method (e.g. text-align is not compatible with flexbox) or is there simply something generally wrong with my code?

Here is my HTML/CSS:

* {
  margin: 0;
  padding: 0;

}

body {
  background-color: orange;

}

nav {
  width: 100%;
  height: 60px;
  background-color: black;
  display: flex;
}

nav p {
  text-align: center;
  font-family: arial;
  color: white;
  font-size: 24px;
  line-height: 55px;
  float: left;
  padding: 0px 20px;
  flex: 1 0 auto;


}

nav ul {
  float: left;

}

nav ul li {
  float: left;
  list-style: none;
  position: relative; /* we can add absolute position in subcategories */



}

nav ul li a {
  display: block;
  font-family: arial;
  color: white;
  font-size: 14px;
  padding: 22px 14px;
  text-decoration: none;
}


nav ul li ul {
  display: none;
  position: absolute;
  background-color: black;
  padding: 5px; /* Spacing so that hover color does not take up entire chunk */
  border-radius: 0px 0px 4px 4px;

}

nav ul li:hover ul {
  /* This means when li is hovered, we want the unordered list inside list item to do something. */
  display: block;


}


nav ul li ul li{
  width: 180px; /* increases width so that all text can be fit */
  border-radius: 4px;


}

nav ul li ul li a:hover {
  background-color: #ADD8E6;

}

<!DOCTYPE html>
<html>
 
<head> 
 <link href="header+footer.css" rel = "stylesheet" type="text/css" />
 <title> The Novel Column - Book Reviews </title>

</head>
 

<body>

<nav>

 <p> The Novel Column </p>

 <ul>
  <li> <a href="#"> Content </a>
   <ul> 
    <li> <a href="#"> Subsection 1 </a> </li>
    <li> <a href="#"> Subsection 2 </a> </li>
    <li> <a href="#"> Subsection 3 </a> </li>
    <li> <a href="#"> Subsection 4 </a> </li>
   </ul>
  </li>
  <li> <a href="#"> About Us </a> </li>
 </ul>
 
</nav>





</body>




</html>

Thanks in advance for your help!

Your title is correctly centered in its container (which excludes the links on the right). Did you want your title to be in the *exact* center of the page, ignoring the text on the right? — Obsidian Age, Jun 04 '19 at 04:07

score 3 · Accepted Answer · answered Jun 04 '19 at 04:34

The easiest way to solve this would be to give nav ul position: absolute.

Note that this will also move it to the left of the title, so you'll also want to give it right: 0:

nav ul {
  position: absolute;
  right: 0;
}

This can be seen in the following:

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: orange;
}

nav {
  width: 100%;
  height: 60px;
  background-color: black;
  display: flex;
}

nav p {
  text-align: center;
  font-family: arial;
  color: white;
  font-size: 24px;
  line-height: 55px;
  float: left;
  padding: 0px 20px;
  flex: 1 0 auto;
}

nav ul {
  position: absolute;
  right: 0;
}

nav ul li {
  float: left;
  list-style: none;
  position: relative;
  /* we can add absolute position in subcategories */
}

nav ul li a {
  display: block;
  font-family: arial;
  color: white;
  font-size: 14px;
  padding: 22px 14px;
  text-decoration: none;
}

nav ul li ul {
  display: none;
  position: absolute;
  background-color: black;
  padding: 5px;
  /* Spacing so that hover color does not take up entire chunk */
  border-radius: 0px 0px 4px 4px;
}

nav ul li:hover ul {
  /* This means when li is hovered, we want the unordered list inside list item to do something. */
  display: block;
}

nav ul li ul li {
  width: 180px;
  /* increases width so that all text can be fit */
  border-radius: 4px;
}

nav ul li ul li a:hover {
  background-color: #ADD8E6;
}

<body>
  <nav>
    <p> The Novel Column </p>
    <ul>
      <li> <a href="#"> Content </a>
        <ul>
          <li> <a href="#"> Subsection 1 </a> </li>
          <li> <a href="#"> Subsection 2 </a> </li>
          <li> <a href="#"> Subsection 3 </a> </li>
          <li> <a href="#"> Subsection 4 </a> </li>
        </ul>
      </li>
      <li> <a href="#"> About Us </a> </li>
    </ul>
  </nav>
</body>

score -1 · Answer 2 · answered Jun 04 '19 at 04:28

The text is in center but if you are still facing problem then you can use center tag on the heading directly.

for example

<h2><center>The Novel Column</center></h2>

This will make sure it doesn't change it's alignment with other texts.

Hope it helps!. :)

score -1 · Answer 3 · answered Jun 04 '19 at 05:02

please try this. hope your problem will be fixed.

* {
  margin: 0;
  padding: 0;

}

body {
  background-color: orange;

}

nav {
  width: 100%;
  height: 60px;
  background-color: black;
  display: flex;
}

nav p {
  text-align: center;
  font-family: arial;
  color: white;
  font-size: 24px;
  line-height: 55px;
  float: left;
  padding: 0px 20px;
  flex: 1 0 auto;


}

nav ul {
  position: absolute;
  right: 0;

}

nav ul li {
  float: left;
  list-style: none;
  position: relative; /* we can add absolute position in subcategories */



}

nav ul li a {
  display: block;
  font-family: arial;
  color: white;
  font-size: 14px;
  padding: 22px 14px;
  text-decoration: none;
}


nav ul li ul {
  display: none;
  position: absolute;
  background-color: black;
  padding: 5px; /* Spacing so that hover color does not take up entire chunk */
  border-radius: 0px 0px 4px 4px;

}

nav ul li:hover ul {
  /* This means when li is hovered, we want the unordered list inside list item to do something. */
  display: block;


}


nav ul li ul li{
  width: 180px; /* increases width so that all text can be fit */
  border-radius: 4px;


}

nav ul li ul li a:hover {
  background-color: #ADD8E6;

}

<!DOCTYPE html>
<html>
 
  <head> 
    <link href="header+footer.css" rel = "stylesheet" type="text/css" />
    <title> The Novel Column - Book Reviews </title>

  </head>
  <body>
    <nav>
      <p> The Novel Column </p>
      <ul>
        <li> <a href="#"> Content </a>
          <ul> 
            <li> <a href="#"> Subsection 1 </a> </li>
            <li> <a href="#"> Subsection 2 </a> </li>
            <li> <a href="#"> Subsection 3 </a> </li>
            <li> <a href="#"> Subsection 4 </a> </li>
          </ul>
        </li>
        <li> <a href="#"> About Us </a> </li>
      </ul>
    </nav>
  </body>
</html>

Text-Align: Center not centering properly

3 Answers3