How to Center This Menu with CSS

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.

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 DIV menu

it is semantically better not to use div for menu (instead use followed by
it's wrong to repeat many times an id (instead use classes, or combine css selectors - for your html #menu-button is the same as #menu div).

Here the html + css corrected with the centered menu

   <html>
<head>
<style>
@charset "utf-8";

html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}

#container {
width: auto;
margin: 0 auto;
padding: 0;
}

#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}

#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */

}

#container #topcontain #header #logo {

width:150px;
height:117px;
margin:auto;
float:left;
}

#container #topcontain #header #title {

width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}

#container #menu {
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}

#container #menu li{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}

#container #menu li a:link, #container #menu li a:visited{
text-decoration:none;
color:inherit;
}

#container #menu li:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;  
}

/*centered menu */
nav ul{
margin: 10px auto;
width: 755px;
}
</style>
</head>

<body
<div id="container">
<div id="topcontain">
        <div id="header">

        <div id="logo">
                Logo Here
        </div>

        <div id="title">
            <h1> THE TITLE HERE</h1>
        </div>

    </div>
</div>

<nav id="menu">
         <ul>
        <li>
            <a href="#"> HOME </a>
        </li>

       <li>
            <a href="#"> PRODUCTS </a>
        </li>

       <li>
            <a href="#"> GALLERY </a>
        </li>

       <li>
            <a href="#"> INFO </a>
        </li>

       <li>
            <a href="#"> ABOUT US </a>
        </li>
        </ul>
   </nav>
</div>
</body>
</html>

The centering is obtained giving a specific width to the ul (it could have also been a div or whatever) and giving it an "auto" margin for right and left.

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/

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 the menu

<center> and "align"

are deprecated.

After getting a link to the page:
If you want to center the ul#ProductMenu_List, change your CSS:

.top-bar-section #ProductMenu_List {
     margin: 0 auto;
     //float: right;
     //margin-right: -10px;
}

.top-bar-section ul li {
    //float: left;
    display: inline-block;
}

If you want to center your div.TopMenu_TD, do following in CSS:

.logoRow .menus .pagelinks {
    //float: right;
}

If you want to center elements, "float" is in most case the opposite of helpful. Text-align: center, display: inline-block and/or margin: 0 auto are in most case the solution.

And take your to google for Html5 and CSS3. You will need it.

Update
After seeing that you only have access to the templates - add following code to "Kodefelter" - Head:

<style>
    .top-bar-section #ProductMenu_List {
         margin: 0 auto;
         float: none;
         max-width: 400px;//or another value
         display: block;
    }

    #ProductMenu_List > li {
        float: none;
        display: inline-block;
    }

    .logoRow .menus .pagelinks {
        float: none;
        display: block!important;
        margin: 0 auto;
        max-width: 500px;
    }
</style>

how do i align my css drop down menu in center?

Low Hanging Fruit answer:

The easiest fix is set the ul to be display: inline-block and set the containing div to be width: 100%; and text-align: center.

body {  background-image: url(2cg3c.jpg);}.menu-container {    width: 100%;    text-align: center;}ul {  margin: 0;  padding: 0;  list-style: none;  display: inline-block;}ul li a {  text-decoration: none;  color: white;  display: block;}ul li {  float: left;  width: 200px;  height: 40px;  background-color: black;  font-size: 20px;  line-height: 40px;  text-align: center;  opacity: .7;  border: 3px solid #285189;}ul li a:hover {  background-color: red;}ul li ul li {  display: none;}ul li:hover ul li {  display: block}

<!DOCTYPE html><html>
<head>  <title>Sweets</title>  <link rel="stylesheet" type="text/css" href="project1.css" </head>
  <body>
    <div class="menu-container">      <ul>        <li><a href="#">1</a>          <ul>            <li><a href="#">2</li>      <li><a href="#">3</li>      <li><a href="#">4</li>      <li><a href="#">5</li>          </ul>    </li>    <li><a href="#">6</a>            </li>            <li><a href="#">7</a>            </li>            <li><a href="#">8</a>            </li>            <li><a href="#">9</a>            </li>          </ul>    </div>
  </body>
</html>