Search code examples
htmlcssresponsive-designcentering

Variable Width Footer with Centered Links

My footer currently has a series of links of varying size that, as the page's width decreases, automatically wrap around to the next line.

<ul class="footer-links">
  <li>text 1</li>
  <li>text 2</li>
  <li>text 3</li>
  <li>longer text 1</li>
  <li>text 4</li>
  <li>text 5</li>
  <li>longer text 2</li>
  <li>much longer text 1</li>
  <li>longer text 3</li>
  <li>text 6</li>
  <li>much longer text 2</li>
  <li>very much longer text 1</li>
  <li>text 7</li>
  <li>longer text 4</li>
</ul>

see http://jsfiddle.net/X6EWn/

What I want is to get each of the rows to always be centered, even as the links wrap around.

Any ideas on how this can be accomplished?

Solution

  • This will give you what you want. See fiddle: http://jsfiddle.net/harveyramer/NF2tm/

    ul.footer-links {
    display: block;
    list-style-type: none;
    text-align: center;
}

ul.footer-links > li {
    margin: 3px 5px;
    display: inline-block;
}