How to horizontally center an unordered list of unknown width?

by

The solution, if your list items can be display: inline is quite easy:

#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }

However, many times you must use display:block on your <li>s. The following CSS will work, in this case:

#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }

More Related Contents:

  1. How to horizontally center an element
  2. How to center an element horizontally and vertically
  3. How to center a “position: absolute” element
  4. Best way to center a on a page vertically and horizontally? [duplicate]
  5. Centering in CSS Grid
  6. Vertically center two elements within a div [duplicate]
  7. How to center a button within a div?
  8. Using margin:auto to vertically-align a div
  9. How can I vertically center a div element for all browsers using CSS?
  10. Keep the middle item centered when side items have different widths
  11. How to horizontally align ul to center of div?
  12. What makes the text on a element vertically centered?
  13. CSS horizontal centering of a fixed div?
  14. How can I horizontally center an element?
  15. How can I vertically center text in a dynamically height div?
  16. center inside a with CSS
  17. How to align 3 divs (left/center/right) inside another div?
  18. Styling an input type=”file” button
  19. Why does z-index not work?
  20. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
  21. Extend bootstrap row outside the container
  22. html/css hexagon with image inside
  23. CSS image resize issue
  24. How to prevent line break at hyphens in all browsers
  25. Can I override inline !important?
  26. Preserve line breaks in textarea
  27. Why is there a default margin on the element? [closed]
  28. set css border to end in a 90 instead of a 45 degree angle
  29. How to make one span both columns in a two column table?
  30. What does “semantically correct” mean?

Leave a Comment