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 draw lines in ionic

    How to prevent this H2-tag from half disappearing?

    How can I override an external css?

    Chrome & Firefox not rendering bold font-weights of Avenir, but Safari does! How to fix?

    How to property adjust table?

    How to apply different css style to gwt datagrid widget in the same page? [duplicate]

    How can I define fieldset border color?

    How to design the data that you gathered from the table

    How to get this functionality to work

    How to create HTML/CSS menu 100% width where text goes to the edges?

    How can I create a full height responsive horizontal scrolling list of images with CSS

    How to style using d3's .style() method instead of using CSS in style tags for .axis path {}?

    HTML/CSS - How to set text (e.g. 'Quote of the Day') to change automatically on page load/reload?

    how to move image vertically with css [closed]

    How do you replicate this box-shadow effect?

    How can I mix vertically-centered elements with different font sizes and retain consistent line height?

    how to set responsive background-image of element using css?

    CSS: how to create a fixed top header with a fixed width

    How to Customise the angular material date-picker?

    How to make a thicker text shadow using css?

    How to hide navbar when when overlay appears

    How can i make a div to slide in from right side to left?

    How to add a box shadow to a table tr element upon hover? [duplicate]

    How to make a main div appear next to a sidebar

    CSS box-shadow shows weird white region?

    How do you run javascript with only a CSS class?

    How to push image (behind canvas) to front in order for its onclick function to work

    Why the jaggedness at the end? How to fix the CSS style

    how to convert inline CSS into external CSS?

    How to add bold text with CSS? [duplicate]