Centering floating ul in a div with css

Question

For some reason the code below isn't centering my Unordered List (I have the margin style in the html). I can't figure out why...any ideas??

html:

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="StyleSheet" type="text/css" href="organicForUs.css" />
</head>
<body>
    <div id="content">
        <img id="logo" src="logo.png" />
    </div>
    <div id="footie" style="margin-left: auto; margin-right: auto;">
        <ul>
            <li><p id="aboutP">about</p></li>
            <li><p id="addP">add your store</p></li>
            <li><p id="reportP">report a missing store</p></li>
            <li><p id="advertiseP">advertise with us</p></li>
        </ul>
    </div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="organicForUs.js"></script>
</body>

css:

#footie li {
list-style-type: none;
float: left;
  }
 #footie p {
font-family: sans-serif;
font-size: 11px;
color: white;
font-weight: bold;
padding-left: 10px;
}

score 0 · Answer 1 · answered Aug 20 '12 at 10:03

The solution proposed above has one caveat: You need to pre-specify the < div >'s width. This would break in case more items are added to the ul. Here is a better solution:

#footie {
  float:left;       ***
  width:100%;       ***
  overflow:hidden;  ***
  position:relative;***
}
#footie ul {
 clear:left;
 float:left;
 list-style:none;
 margin:0;
 padding:0;
 position:relative;  ***
 left:50%;           ***
 text-align:center; // optional, if you want to center the text
}
#centeredmenu ul li {
  position:relative; ***
  display:block;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  right:50%;         ***
}

Please note that the lines marked with three stars (***) are the lines which are absolutely necessary for this to work.

But this solution is more dynamic. Refer to this article: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Have fun!

score 0 · Accepted Answer · answered Feb 17 '12 at 17:41

0

First, you have the margin's applied to the UL's parent, not the UL. If you want the UL, and NOT #footie, you'll have to move the style declarations (which shouldn't be inline, anyway).

Also, for the margin: auto trick to work, you need to declare a width. Something like:

#footie ul {
    width: 600px;
    margin: 0 auto;
}

answered Feb 17 '12 at 17:41

chipcullen

6,840
1
21
17

It should work with relative units (e.g. percentages) as well. – chipcullen Feb 17 '12 at 17:45
Here's a fiddle: http://jsfiddle.net/85mbu/. I've seen a couple questions lately regarding `margin:0 auto;`. To make margin:auto to work, the element you're trying center has to have a smaller width than the containing element. Otherwise, it's 100% width, which by definition won't have any margins to "auto" calculate. – jmbertucci Feb 17 '12 at 17:50
@chipcullen just did you have to wait a certain amount of time before you can accept an answer – user1086348 Feb 17 '12 at 17:58
didn't mean to come off impatient - sorry about that! – chipcullen Feb 17 '12 at 18:01
To center element of unknown width: http://stackoverflow.com/questions/1232096/how-to-horizonatally-center-a-floating-element-of-a-variable-width – Yannick Schall Feb 17 '12 at 18:40

Centering floating ul in a div with css

2 Answers2