How to center an unordered list?


Tags: html,css,html-lists,center

Problem :

I need to center an unordered list of unknown width, while still keeping the list-items left aligned.

Achieve the same result as this:

HTML

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

div { text-align: center; }
ul { display: inline-block; text-align: left; }

Except my <ul> doesn't have a parent div. ul { margin: 0 auto; } doesn't work because I don't have a fixed width. ul { text-align: center; } doesn't work because the list-items won't be left aligned anymore. So how can I center this <ul> while keeping the <li>s left aligned (without having a parent div wrapper)?

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

EDIT: Perhaps my wording wasn't the best... The first block of code already works... what i need is to do it without the <div> wrapper, if that's possible of course. Float tricks? Pseudo element tricks? There must be a way.



Solution :

<html>
<body>    
<style>
    ul { display:table; margin:0 auto;}
<style>
     <ul>
        <li>56456456</li>
        <li>4564564564564649999999999999999999999999999996</li>
        <li>45645</li>
    </ul>
    </body>
</html>

http://jsfiddle.net/fNFYr/25/

EDIT: didnt notice the width problem.


    CSS Howto..

    How to get image url in css inside a public folder in Rails?

    how to properly override CSS in external file

    How should I add some space between the text and the border using CSS

    jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element

    dynamic drop down how to show success using css (tic icon)

    Show bootstrap glyphicon in link when hovering

    How to add an image to an anchor tag using CSS?

    How to close popup

    How to create a sliding animation on menu hover with jQuery?

    How to use scss with css modules / postcss inside components

    CSS: can't understand how to work with the z-index

    How to centre fluid image and a caption using CSS Flexbox?

    How to load css into html dynamically?

    how to make a css gradient stop after so many pixels?

    How to make content shareable from a static website

    How To Avoid Certain CSS coding/commands From Overriding Existing Customisations

    How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

    How do I join my list and div using css?

    How do I change tab size in Vim?

    how to make a div expand to wrap a dynamic content in css

    How to change header and footer to full width

    How to display element on screen but not at the top of the screen in html/css?

    How to leave some top gap for H2 title tag with css

    How to make css opacity property not to be inherited from parent div´s?

    How to use the computer modern font in webpages?

    how to clear all css styles

    How to place Facebook send dialog box above other content?

    how to write set of styles as a function in compass sass

    Showing Text When Hovering Over an Image Link

    “Dynamic” CSS id names? How to add them to the CSS file?