How can I centre an unordered list of floated items to the page

Question

If I have an unordered list, e.g.

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">About</a></li>
    <li><a href="index.html">Service</a></li>
    <li><a href="index.html">Blog</a></li>
</ul>

Using CSS to align them nicely, e.g.

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul li {
    float: left;
    line-height: 50px;
    margin-left: 5px;
    margin-right: 5px;
}
ul li a {
    display: block;
    height: 46px;
    padding-left: 5px;
    padding-right: 5px;
}

How can I then align the <ul> element to the centre of the page, baring in mind that there are no widths specified for any elements?

Preferred answer will be compatible in ie6+

any help appreciated.

Jai

score 5 · Accepted Answer · edited May 23 '17 at 12:12

5

You can use display: inline-block combined with text-align: center.

Here's an implementation of that with your code: http://jsfiddle.net/kRDsf/

If you need IE7 support: http://jsfiddle.net/kRDsf/1/ + Inline block doesn't work in internet explorer 7, 6

If you need IE6 support, see the comments on this answer.

edited May 23 '17 at 12:12

Community

1
1

answered Jun 14 '11 at 23:13

thirtydot

224,678
48
389
349

is that compatible with all widely used browsers though? i.e. ie6+ ? – Jai Jun 14 '11 at 23:15
ahh i see you've just answered that haha, is there another way that is supported in ie 6 and 7? – Jai Jun 14 '11 at 23:16
@Jai: What I've done definitely *already* works in IE7. I'll check IE6. Are you 100% sure you need IE6 support, for some specific reason? – thirtydot Jun 14 '11 at 23:19
well for the project i'm working on (school) in the specification its required to look the same on all widely used browsers and i think that includes ie6. Can i also ask what does zoom do? – Jai Jun 14 '11 at 23:21
1

@Jai: `zoom: 1` = http://stackoverflow.com/questions/6287023/what-bug-does-zoom1-fix-in-css – thirtydot Jun 14 '11 at 23:24
2

@Jai: Supporting IE6 will make your project 5000% harder to complete. [In most countries](http://ie6countdown.com/), it's no longer "widely used". Now that I've said that: for some reason, the `display: block` on `ul li a` is stopping this working in IE6. I've "fixed" it to work in IE6 by providing *only IE6* with `display: inline`, which fixes it (or close enough, anyway). Here's that version: [http://jsfiddle.net/AQRkS/](http://jsfiddle.net/AQRkS/) – thirtydot Jun 14 '11 at 23:28
@Jai: Find out if you *really* need to support IE6. I can't express just how *annoying it is* to support IE6 due to the massive amount of bugs and deviations from the standards it has. – thirtydot Jun 14 '11 at 23:37
1

after looking into its usage further, i think i agree, considering the majority of ie users are from china which my project is not intended for, i can send ie6 to the scrapyard :) thanks for all the help! – Jai Jun 14 '11 at 23:51
@Jai: Awesome :) In that case, stick with the `"If you need IE7 support"` version from my answer. – thirtydot Jun 14 '11 at 23:53
oh, one last thing, is there are way to make it fixed. As in, when the page is resized to a smaller width, the text all stays on the same line? – Jai Jun 14 '11 at 23:58
1

@Jai: On the `ul`, add either `white-space: nowrap`, or `min-width: ??px`. See which behaviour you like best. Probably `nowrap`. – thirtydot Jun 15 '11 at 00:00

How can I centre an unordered list of floated items to the page

1 Answers1