How to Center Align Horizontal ≪Ul≫ Menu

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>

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 alignment for a horizontal ul menu?

You have to remove float, set display: inline-block to the items and text-align: center to container.

ul {  list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  text-align: center;}li {  /* float: left; */  display: inline-block;  position: relative;}a:link,a:visited {  display: block;  width: 120px;  font-weight: bold;  color: #FFFFFF;  background-color: #98bf21;  text-align: center;  padding: 4px;  text-decoration: none;  text-transform: uppercase;}a:hover,a:active {  background-color: #7A991A;}

<ul>  <li><a href="#home">Home</a>  </li><!--  --><li><a href="#about">About</a>  </li><!--  --><li><a href="#contact">Contact</a>  </li></ul>

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.

How to horizontally align ul to center of div?

Following is a list of solutions to centering things in CSS horizontally. The snippet includes all of them.

html {  font: 1.25em/1.5 Georgia, Times, serif;}
pre {  color: #fff;  background-color: #333;  padding: 10px;}
blockquote {  max-width: 400px;  background-color: #e0f0d1;}
blockquote > p {  font-style: italic;}
blockquote > p:first-of-type::before {  content: open-quote;}
blockquote > p:last-of-type::after {  content: close-quote;}
blockquote > footer::before {  content: "\2014";}
.container,blockquote {  position: relative;  padding: 20px;}
.container {  background-color: tomato;}
.container::after,blockquote::after {  position: absolute;  right: 0;  bottom: 0;  padding: 2px 10px;  border: 1px dotted #000;  background-color: #fff;}
.container::after {  content: ".container-" attr(data-num);  z-index: 1;}
blockquote::after {  content: ".quote-" attr(data-num);  z-index: 2;}
.container-4 {  margin-bottom: 200px;}
/** * Solution 1 */.quote-1 {  max-width: 400px;  margin-right: auto;  margin-left: auto;}
/** * Solution 2 */.container-2 {  text-align: center;}
.quote-2 {  display: inline-block;  text-align: left;}
/** * Solution 3 */.quote-3 {  display: table;  margin-right: auto;  margin-left: auto;}
/** * Solution 4 */.container-4 {  position: relative;}
.quote-4 {  position: absolute;  left: 50%;  transform: translateX(-50%);}
/** * Solution 5 */.container-5 {  display: flex;  justify-content: center;}

<main>  <h1>CSS: Horizontal Centering</h1>
  <h2>Uncentered Example</h2>  <p>This is the scenario: We have a container with an element inside of it that we want to center. I just added a little padding and background colors so both elements are distinquishable.</p>
  <div class="container  container-0" data-num="0">    <blockquote class="quote-0" data-num="0">      <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>      <footer>Tasha Yar about Data</footer>    </blockquote>  </div>
  <h2>Solution 1: Using <code>max-width</code> & <code>margin</code> (IE7)</h2>
  <p>This method is widely used. The upside here is that only the element which one wants to center needs rules.</p>
<pre><code>.quote-1 {  max-width: 400px;  margin-right: auto;  margin-left: auto;}</code></pre>
  <div class="container  container-1" data-num="1">    <blockquote class="quote  quote-1" data-num="1">      <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>      <footer>Tasha Yar about Data</footer>    </blockquote>  </div>
  <h2>Solution 2: Using <code>display: inline-block</code> and <code>text-align</code> (IE8)</h2>
  <p>This method utilizes that <code>inline-block</code> elements are treated as text and as such they are affected by the <code>text-align</code> property. This does not rely on a fixed width which is an upside. This is helpful for when you don’t know the number of elements in a container for example.</p>
<pre><code>.container-2 {  text-align: center;}
.quote-2 {  display: inline-block;  text-align: left;}</code></pre>
  <div class="container  container-2" data-num="2">    <blockquote class="quote  quote-2" data-num="2">      <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>      <footer>Tasha Yar about Data</footer>    </blockquote>  </div>
  <h2>Solution 3: Using <code>display: table</code> and <code>margin</code> (IE8)</h2>
  <p>Very similar to the second solution but only requires to apply rules on the element that is to be centered.</p>
<pre><code>.quote-3 {  display: table;  margin-right: auto;  margin-left: auto;}</code></pre>
  <div class="container  container-3" data-num="3">    <blockquote class="quote  quote-3" data-num="3">      <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>      <footer>Tasha Yar about Data</footer>    </blockquote>  </div>
  <h2>Solution 4: Using <code>translate()</code> and <code>position</code> (IE9)</h2>
  <p>Don’t use as a general approach for horizontal centering elements. The downside here is that the centered element will be removed from the document flow. Notice the container shrinking to zero height with only the padding keeping it visible. This is what <i>removing an element from the document flow</i> means.</p>
  <p>There are however applications for this technique. For example, it works for <b>vertically</b> centering by using <code>top</code> or <code>bottom</code> together with <code>translateY()</code>.</p>
<pre><code>.container-4 {    position: relative;}
.quote-4 {  position: absolute;  left: 50%;  transform: translateX(-50%);}</code></pre>
  <div class="container  container-4" data-num="4">    <blockquote class="quote  quote-4" data-num="4">      <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>      <footer>Tasha Yar about Data</footer>    </blockquote>  </div>
  <h2>Solution 5: Using Flexible Box Layout Module (IE10+ with vendor prefix)</h2>
  <p></p>
<pre><code>.container-5 {  display: flex;  justify-content: center;}</code></pre>
  <div class="container  container-5" data-num="5">    <blockquote class="quote  quote-5" data-num="5">      <p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>      <footer>Tasha Yar about Data</footer>    </blockquote>  </div></main>

Aligning a ul to the middle for horizontal CSS menus

You can remove your float properties.
Just add a width to your #menu ul and add margin : 0 auto; to make it centered.

Example :

#menu ul {
    width: 300px;
    margin: 0 auto;
}

Live demo here : http://codepen.io/joe/pen/uAaHo

centering ul li horizontal drop down menu

There are lots of different ways to do this - you'll need to give it a width, though, instead of 100%. Is that ok?

Then with a width in place, you can use display:inline on the ul, and text-align:center on the parent div, or maybe use margin:auto.

If this doesn't help, let me know, I will make a fiddle for you :)

Can't get horizontal UL menu to center or be wide enough, keeps wrapping to new line

Here is an update of your code. Is this the layout you want?

To make it behave I removed float: right;, left: -50%; and changed to text-align: center on #menu, removed left: 50% and added display: inline-block on ul

I also recommend removing the float on the li, and either use flex or display: inline-block.

@charset "UTF-8";/* CSS Document */
#header {  font-family: Arial, Helvetica, sans-serif;  font-size: 36px;  color: red;  text-align: center;}#menu {  background-color: orange;  position:relative;  text-align:center;}ul {  list-style:none;  position:relative;  display: inline-block;  padding: 0;}ul li{    list-style: none;  float: left;  background-color: red;  padding-top: 5px;  padding-bottom: 5px;  padding-left: 10px;  padding-right: 10px;}
ul li a {  text-decoration: none;  color: white;     float: left;  text-align: center;}
a[href="#"]:hover {   color: white;  background: gray; }
#left {  margin-top: 100px;  width: 160px;     float: left;  padding: 10px}
#right {  margin-top: 100px;  width: 160px;  float: right;  padding: 10px;}
#content {  margin-top: 100px;  margin-left: 200px;  margin-right: 200px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Untitled Document</title>    <link href="project1.4.css" rel="stylesheet" type="text/css"/>  </head>
  <body>    <div id="header">Ball State University Education Redefined    </div>    <div id="menu">      <ul>        <li><a href="#">About</a></li>        <li><a href="#">Admissions</a></li>        <li><a href="#">Academics</a></li>        <li><a href="#">Campus Life</a></li>        <li><a href="#">Athletics</a></li>        <li><a href="#">News</a></li>        <li><a href="#">Calendar</a></li>        <li><a href="#">Giving</a></li>      </ul>    </div>    <br/>    <br/>    <br/>    <div id="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.     </div>    <div id="right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.     </div>    <div id="content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
    </div>
  </body></html>

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.