Aligning navigation bar in the center of page

StackOverflow https://stackoverflow.com/questions/19279343

  •  30-06-2022
  •  | 
  •  

Question

This is my CSS code for a navigation bar:

 ul     {
    overflow:hidden;
    margin: 0;
    padding: 0;
    align: center
    list-style-type: none; 
    }



li      {
    float: left}

    a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }

Currently, the bar is aligned to the left, and I want it in the center. Can someone please explain how to do this? What do I need to type if I input an additional line of code, and where would it be?

This is the code from part of my HTML mark up:

<body>

<ul>

<li><a href=csshomepage.html>Home</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#links">Links</a></li>


</ul>
Was it helpful?

Solution

Display the li inline and the anchor as inline-block.

ul {
    margin: 0;
    padding: 0;
    text-align: center
}
li {
    display: inline;
    list-style: none; 
}
a:link,a:visited
{
    display:inline-block;
    margin-right: -4px;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active
{
    background-color:#7A991A;
}

Check demo

OTHER TIPS

To centre the ul, you should apply a a width or max-width then

ul {
margin:0 auto;
}

You can do this:

 ul {
  overflow:hidden;
  margin: 0 auto;
  padding: 0;
  align: center
  list-style-type: none;
  width: 50%;
}

margin: 0 auto; allows it to be centered as long as you have a width.

JSFIDDLE

FIDDLE

ul     {
    overflow:hidden;
   list-style: none;
  padding: 0;
  width: 50%;
  margin: 0 auto;
    //align: center
   // list-style-type: none; 
    }

Set this to your menu.css (if your navigation would be considered you menu bar)

This contains the .css codes needed for a centered navigation

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top