Can't get list to center when using UL

Question

I have several <li> items centered and displaying inline within <ul> tags, but I cannot seem to get the <ul> itself to center on the page. You can see the slight indention problem on this JSFiddle.

Here is the HTML for the list:

<ul>
    <li><a href="/index.html" title="Home">Home</a></li> |
    <li><a href="/knowing.html" title="Knowing">Knowing</a></li> |
    <li><a href="/caring.html" title="Caring">Caring</a></li> |
    <li><a href="/working.html" title="Working">Working</a></li> |
    <li><a href="/living.html" title="Living">Living</a></li> |
    <li><a href="/opportunities.html" title="Opportunities">Opportunities</a></li> |
    <li><a href="/medicalservices.html" title="Medical Staff Services">Medical Staff Services</a></li>
    <br> asdf &copy; 2014
</ul>

Here is the CSS:

body {  
    font-size: 75%; /* Base browser font size is 14px */
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    text-align: center;
    margin: 0 auto;
    width: 75%;
    clear: both;
}

a, a:link, a:hover, a:active, a:visited {
    text-decoration: none;
}

ul {
    margin: 0 auto;
}

li {
    text-align: center;
    display: inline;
}

.footer a:link, .footer a:visited, .footer a:active, .footer a:hover, {
    text-align: center;
    color: #cccccc;
}

Annoyingly, the list centers if I delete the <ul> tags from the HTML, but that is improper markup and potentially dangerous/problematic.

I've tried a few other suggestions from similar questions, such as positioning a container div left at width: 100%; with position: relative;, positioning the <ul> div left and floating it left 50%, and then positioning the <li> items left and floating them right 50%, but that doesn't work with regard to the | separators that I have in-between each <li> item.

Is my markup somehow still incorrect? Do I have some conflicting CSS values that prevent it from working? Do <ul> lists always indent, no matter what?

EDIT: Added CSS code directly to the post.

Looks centered to me on Chrome/Win 7. What browser are you using? **EDIT** Nevermind, I see it now. My screen was too large to really notice the difference... @j08691's answer below is the way to go. — Dryden Long, Feb 19 '14 at 19:58
OT: For valid code text elements are not allowed directly in
so the "|" signs and copyright information should not be there. — Tanel Eero, Feb 19 '14 at 20:04
@TanelEero Do you know of a way to have the pipe separators in between the list items in a valid manner? Without making them part of the click-able link, that is. — , Feb 19 '14 at 20:16

score 2 · Accepted Answer · edited Feb 11 '15 at 16:07

2

<ul> elements have a default padding-left of 40px. Remove it with padding: 0; or padding-left: 0;.

JSFiddle Example

You can use your browser's F12 developer tools to inspect elements and their margins or padding in the future.

edited Feb 11 '15 at 16:07

FranLegon

87
1
2
9

answered Feb 19 '14 at 19:58

j08691

204,283
31
260
272

JohanVdR · Answer 2 · 2014-02-20T04:48:29.830

Have a look at this example it centers horizontally the list where the menu items have no set width.
See here: http://www.cssplay.co.uk/menus/centered.html

The basic CSS you need:

footer {
  clear: both;
  float: left;
  overflow: hidden;
  width: 100%;
}
ul {
   float: left;
   left: 50%;
   list-style-type: none;
   margin: 0 auto;
   padding: 0;
   position: relative;
}
li {
  float: left;
  position: relative;
  right: 50%;
}

Note: I specifically removed the | separators between the LIs as this is not valid HTML. See the changed example: http://jsfiddle.net/eNQyp/1/ The separators are added as styles on the LIs. It can work your example using this technique and is valid HTML.

Thank you for the response; unfortunately, I specifically mentioned this technique as not being an adequate solution. — TylerH, Feb 19 '14 at 21:44

Can't get list to center when using UL

2 Answers2

Linked