think-outside-the-box

The Problem:
I want to display a list horizontally, but I want the entire list to be centered on my page.

Skip to the code

Intro/Background/SEO Filler

I have recently figured out a long time frustration of mine, so I figured I would jump on here and share it with the world. You’re welcome.  

For years I have had a reoccurring annoyance, where I am given a list that must be centered on a page yet all individual items appear next to each other. In HTML speak, I want to place an “Unordered List” <ul>  or an “Ordered List” <ol> on my page centered, but, I want the “List Items” <li> to be floating next to each other. I have “solved” this problem in the past by floating all the

  • left using CSS (float: left;). Then I set a width on the
      or
        and give it an auto-assigned margin using CSS (width: 500px; margin: 0 auto;). This has been fine I guess. It just makes it a pain to perform mobile responsive CSS on the list. Because as the text shrinks you have to assign a new width to the
          or
            at multiple sizes. 

            The Solution:

            For some reason today as I was faced with this same problem it dawned on me that maybe I was thinking about this all wrong. Instead of trying to manipulate these list items to do my bidding within their blocks, I needed to remove the block styling and treat them as paragraph text. So simple. 

            All that needs to be done is to set your

              or
                as position: relative; so it holds down the fort, display: block; so it takes up the space, and then give it a text-align: center;

                Next, tell your <li> to have a width: auto; and to, and this is the magic, display: inline; Works every time, palm to forehead.

                Sometimes, thinking outside the box is all it takes in CSS. #reallyproudofthatpun

                 

                Example:

                • List Item 1
                • List Item 2
                • List Item 3

                 

                The Code:

                ul,
ol {
    position: relative;
    display: block;
    text-align: center;
}
li {
    width: auto;
    display: inline;
}