Centering a ul without width?

Posted on 2009-02-16
Last Modified: 2012-05-06
I have a ul that looks like the one in the code snipper (below). I'm trying to have the ul centered horizontally but it seems I can only do this if I apply a width to the ul. The only problem with that is that my li's are dynamic and shrink and grow. The blue border i've applied to #footer ul for testing shows it's 100% of the page... I just need it to auto to the combined width of the li's, and center horizontally.

#footer ul{

	margin: 0 auto; padding: 0;

	list-style: none;

	font-size: 11px;

	color: #fff;

	text-transform: uppercase;

	position: relative;

	border: 1px solid blue;



#footer li{

	float: left;

	padding-left: 40px;

	line-height: 45px;


Open in new window

Question by:level9wizard
    LVL 30

    Accepted Solution

    If I am understanding you correctly(I hope), you could add the following code to the #footer ul CSS:

    	text-align: center;

    Open in new window

    LVL 11

    Author Comment

    LZ1, unfortunately that does not work - I did try it and forgot to mention in my original question. Thanks for trying.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Suggested Solutions

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now