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..

    CSS print stylesheet generated content not showing up

    how to show a portion of image like on 9gag.com

    How to align dropdown sub menu?

    Images not showing up in correct spot [closed]

    How do I get the Twitter Widget to act as if any other element?

    how to give space for every row (CSS issue)

    How can I apply an external CSS class to a span created with dojo.create?

    How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?

    How do you make HTML elements appear on a vertical line using CSS?

    CSS HTML how to ignore some css for non ie7 or ie8

    How to apply different css style for IE 10 and 11 only?

    How to edit the CSS of a div that does not contain a H1 tag?

    how to revert to original css values after .css() method

    How do you change the font-size of a custom css style?

    How to get the first parent that has a certain CSS property using jQuery?

    How to avoid text go below the thumbnail with css

    how to get the css floating property to work with four divs?

    How to make a automatic image slider.?

    How to get the header and navbar on top?

    how to get a div to randomly move around a page (using jQuery or CSS)

    How would I detect CSS Transition support on :before pseudo-elements with javascript?

    How to replicate the CSS design of a website

    How to Prevent Linke break for Divs in CSS?

    How to set ribbon on image by stacking it in a div?

    How to remove css files?

    How To Style A Class Based On Unique ID?

    How do I display an empty div tag with CSS?

    How to apply CSS styling to elements created by jquery's append()?

    css show separator icon for icons

    How to make html button look pressed in using css?