How to centralise navigation bar


Tags: html,css,navigationbar

Problem :

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/



Solution :

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>


    CSS Howto..

    How to target a braille / screen-reader via CSS

    How to get maximum compatibility with most of the devices for a Mobile Website?

    CSS: How to force objects to stay inside container but allow full width background? [duplicate]

    How to add shadow to reverse c radial gradient only at the edges?

    How do I get form-groups to overlap?

    how to organize all js, css, php and html code?

    How can i get my slideshow to stop changing size?

    How can I force IE to keep some margin at left in it's browser window?

    How to apply effect just to background image and not text

    How to control new line position after CSS display inline-block break

    How to Over ride youtube external style?

    How can we create custom style for Jquery-ui dialog window in PHP?

    CSS centering my slideshow in the header

    How to find the relevant stylesheet for a specific CSS code [closed]

    How to style another object in when a user hover object in css

    CSS: How to align buttons and text horizontally

    How to create readonly textbox-like structure using html (div/span) and css?

    How browser auto resize website to mobile browse?

    How to show only the div with id while hiding other divs using CSS only

    How to get an interactive geographic map for a country? [closed]

    How do I remove the side padding in the following case?

    Woocommerce CSS - How do I address Payment Methods, so I can tweak/CSS it

    how to avoid from loading unnecessary javascript and css in page on codeigniter to improve the load time [closed]

    How to use px and % in the same layout like this

    how to make divs adjust to dynamic screen resolutions?

    css book on css box model, how block element width can get affected etc

    Images set within CSS and not showing in the HTML [closed]

    How to make bootstrap 3 navbar not wrap

    How to use nth-child with :hover to style multiple children?

    How to add ellipsis to table cells with dynamic width with only CSS?