How to center
    in a page?


Tags: jquery,html,css,html-lists,navbar

Problem :

I have created ul element. These are html and css for my navigation bar:

Html:

 <ul id="list-nav">
    <li><a href="Marsrutas.html">Item1</a>
    </li>
    <li><a href="Nuotraukos.html">Item2</a>
    </li>
    <li><a href="Apie zygi.html">Item3</a>
    </li>
    <li><a href="Apie mane.html">Item4</a>
    </li>
    <li><a href="Dviraciai.html">Item5</a>
    </li>
    <li><a href="Kontaktai.html">Item6</a>

CSS:

    ul#list-nav {
  margin:40px;
  padding:0;
  list-style:none;
  width:525px;
}

ul#list-nav li {

  display:inline
  text-align: center;

}

ul#list-nav li a {
 text-decoration:none;
 padding:5px 0;
 width:65px;

 color:#eee;
 float:left;
 margin:5px;
}

ul#list-nav li a {
  text-align:center;

}

ul#list-nav li a:hover {
  color:#000;
   border-width: 1px;
 border-style: solid;
 border-color: #FFFFFF; 
 -moz-border-radius: 5px;
border-radius: 5px;

}

How can I allign this navigation bar in the center of a page?

Also, I want to ask how to make li items stay still on hover, because they move a bit to the bottom when mouse is over them. For example: http://jsfiddle.net/bufbond/uJ76F/



Solution :

Fiddle:

http://jsfiddle.net/uJ76F/3/

just add margin auto for centering:

#list-nav {    
    margin:auto;    
}

ul#list-nav li a {
    text-align:center;
    border-width: 1px solid #000;
}
ul#list-nav li a:hover {
    color:#000;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

remove the border from hover or change color on hover.


    CSS Howto..

    How to disable parent hover, when hovering over child

    How can I make a CSS3 hover transition run only once and not 'rewind' after the user 'un-hovers'?

    How to make a CSS bar go from right to left?

    FontAwesome icon showing as black box. What CSS is needed to display icon?

    PHP Show Hidden Div

    How to adjust 100% browser height and width with CSS?

    How does jQuery .fadeTo() work?

    How to remove text flicker in CSS?

    How can a

    jQuery glowing animations : how to improve?

    How to Add custom Css Clases to PyroCMS contact form elements

    How to use CSS transition for existing list items to make room for new ones?

    How to load an image with css using Django

    How do I validate day and month?

    How to use Firebug to easily find which css file defines a particular style

    css how to make this div at the bottom of another div [duplicate]

    How can I center a button in the cell of a table using CSS ASP.NET

    How to calculate percentages in LESS CSS?

    How to put Facebook and Twitter buttons next to each other?

    How can I make the side elements spin on the x-axis in this animation?

    How do I correctly position elements and lay out a page?

    How can I set a border in alignment with other borders

    How to force li elements to scroll horizontally and should be able to accommodate all the li elements in only one single line using css

    Why IE10 shows something totally different

    how to put 2 css elements in the same row (one next to each other)?

    how to make menu on mouse hover in CSS

    CSS Padding is working WITH :after selector - how to make it work on main element independently

    Show a specific image on click

    How to remove a class as each image is loaded

    how to set css and html in textarea [closed]