CODEWITHSUNDEEP
htmlcssnavigationbar
TurgidWizard
TurgidWizard

Reputation: 669

How to centralise navigation bar

How can I centralise my navigation bar? I've tried a few things, like <center>, but, I don't know what I'm doing wrong!

CSS:

.NavBar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.NavItem {
    float: left;
}

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

a:hover, a:active {
    background-color: #7A991A;
}

HTML:

<ul class="NavBar">
  <li class="NavItem"><a href="#home">Home</a></li>
  <li class="NavItem"><a href="#news">Snippets of Divinity</a></li>
  <li class="NavItem"><a href="#contact">Contact</a></li>
  <li class="NavItem"><a href="#about">Donate</a></li>
</ul>

Excuse the title of the navigation buttons, I'm making a website devoted to me and the wonderful things that I say and do.

Here is a JSFiddle: https://jsfiddle.net/ryfv3499/

Upvotes: 0

Views: 88

Answers (4)

Dmitriy
Dmitriy

Reputation: 4503

use display: inline-block for .NavItem

for .NavBar - text-align: center

.NavBar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: center;
}

.NavItem {
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
}

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

a:hover, a:active {
    background-color: #7A991A;
}

body { background-color: #D0D0D0; }
<ul class="NavBar">
  <li class="NavItem"><a href="#home">Home</a></li>
  <li class="NavItem"><a href="#news">Snippets of Divinity</a></li>
  <li class="NavItem"><a href="#contact">Contact</a></li>
  <li class="NavItem"><a href="#about">Donate</a></li>
</ul>

Upvotes: 1

Omran Fadel
Omran Fadel

Reputation: 77

Update the .NavBar CSS rule

.NavBar {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    width:90%;
 }

You can use any width but 100%

Upvotes: 2

Akul Von Itram
Akul Von Itram

Reputation: 1534

You must add margin: 0 auto; and define width of your element.

.NavBar {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    width:500px;
}

Here is fiddle: https://jsfiddle.net/ryfv3499/11/

Upvotes: 1

SteJ
SteJ

Reputation: 1541

You can use the following addition to your CSS:

.NavBar {
    list-style-type: none;
    /* margin: 0; */
    margin-left:auto;
    margin-right:auto;
    padding: 0;
    overflow: hidden;
}

This will centre your box provided it has a fixed width; you may need to explicitly specify the width for your navbar too.

Hope this helps

Upvotes: 1

Related Questions