Horizontal Centered Menu in CSS

Horizontal Centered Menu in CSS?

With the provided HTML:

ul { text-align: center; }
li { display: inline-block; } /* Don't float them */

http://jsfiddle.net/NpLR3/

Center a horizontal CSS menu

You can center the navigation bar by using the following CSS rules:

nav {
    margin: 0 auto; 
    text-align: center;
    border:1px solid black;
}

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

nav ul {
    list-style: none;
    margin: 0;                 /* << add this */
    padding: 0;                /* << add this */
    display: inline-block;     /* << add this */
    vertical-align: top;       /* << add this */
}

nav ul li {
    float: left;
    margin: 0;          /* << add this */
    padding: 0;         /* << add this */
}

nav ul li:hover a {
    color: #000000;
}

nav ul li a {
    display: block; 
    padding: 10px 15px;
    color: #000000;
    text-decoration: none;
    background-color: pink; /* optional... */
}       

nav ul ul {
    border-radius: 0px;
    padding: 0;
    position: absolute;
}

nav ul ul li {
    float: none; 
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    position: relative;
}

nav ul ul li a {
    color: #000000;
}

nav ul ul li a:hover {
    color: #666666;
}

nav ul ul ul {
    position: absolute;
    top:0;
}

See demo at: http://jsfiddle.net/audetwebdesign/DP6Ax/

The key is to set display: inline-block for nav ul, which will allow your text-align: center rule to take effect.

Make sure to zero out margins and paddings on the ul and li elements. Everything else that you did was more or less right, so you should be good.

CSS: Center horizontal menu vertically

Add vertical-align: middle; to the #header li a rule

#header li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    vertical-align: middle;
}

Sample snippet

#header {

    background-color:#565656;

    color:white;

    text-align:center;

    height:10%;

}

#header ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    text-align:center;

}

#header li {

    display:inline;

}

#header li a {

    display: inline-block;

    color: white;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

    vertical-align: middle;

}

#header li a:hover {

    background-color: #111;

}

<div id="header">

  <ul>

    <li><a class="no" href="index.html"><img src="images/miniLogo.png"/></a></li>

    <li><a class="active" href="index.html">HOME</a></li>

    <li><a href="product.html">PRODUCTS</a></li>

    <li><a href="contact.html">ORDER</a></li>

    <li><a href="about.html">ABOUT US</a></li>

    <li><a href="contact.html">CONTACT US</a></li>

  </ul>

</div>

How do I center align horizontal UL menu?

From http://pmob.co.uk/pob/centred-float.htm:

The premise is simple and basically just involves a widthless float wrapper that is floated to the left and then shifted off screen to the left width position:relative; left:-50%. Next the nested inner element is reversed and a relative position of +50% is applied. This has the effect of placing the element dead in the center. Relative positioning maintains the flow and allows other content to flow underneath.

Code

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/

<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

How to center a navigation bar with CSS or HTML?

#nav ul {
    display: inline-block;
    list-style-type: none;
}

It should work, I tested it in your site.

Sample Image

CSS how to center a menu

if you center any element or menu item you have to follow 2 steps:

setp1:

ul{
   width: 100%;
   display: table;
   text-align: center;
}

step2:

ul li{
     display: inline-block;
     float: none;
}

and done. That's it now try it yourself.

Centered Menu Dropdowns in Purecss Framework

I found a way to achieve what I wanted after checking this example. A width was needed to be set for the submenu:

.pure-menu-horizontal ul.pure-menu-children {
  left: 50%;
  margin-left: -90px;
  width: 180px;
}

You can see it in action here.

Flexbox horizontal menu centering while keeping last element to the right side

Give also #menu a left margin of auto.

Stack snippet

#container {

  display: flex;

  justify-content: center;

  align-items: center;

}

#last, #menu {

  margin-left: auto;

}

#last span, #menu span {

  padding: 10px 20px;

  background: lightgray;

}

<div id="container">

  <div id="menu">

    <span>1</span>

    <span>2</span>

    <span>3</span>

  </div>

  <div id="last">

    <span>4</span>

  </div>

</div>

Horizontal Centered Menu in CSS