How To Center A CSS Drop Down Menu [closed]

Question

I'm in need of some help. I have a CSS dropdown menu but i want the titles to be centered so on all screen sizes it would be in the middle, as at the moment its stuck to the left.

http://jsfiddle.net/y4vDC/

Any help would be greatly appreciated.

Here is a bit of the HTML code:

<div id='cssmenu'>
  <ul>
    <li><a href='events.html'><span>Events</span></a></li>
  </ul>

Answer 1

replace this css with what you have for #cssmenu > ul > li:

#cssmenu > ul > li {

    display:inline-block;

    margin-left: 15px;       /* This is when the drop down box appears */

    position: relative;

}

and add this to your css codes:

 #cssmenu > ul {
        text-align:center;
 }

here it is: http://jsfiddle.net/y4vDC/10/

Answer 2

You need your li elements to be inline, and then use text-align on the parent element to center them:

#cssmenu ul {
  text-align:center;
}
#cssmenu ul li {
  display: inline;
}

In order that they stay as inline, you need to delete the float from the list elements.

http://jsfiddle.net/y4vDC/13/

Answer 3

you have at least 2 easy options:

1. set ul as display:table and margin:auto; http://jsfiddle.net/y4vDC/11/
2. set ul as display:inline-block and text-align:center on parent http://jsfiddle.net/y4vDC/12/