Простая такая задача, очень актуальная в условиях адаптивной верстки. Как выровнять список по центру, так чтобы при сужении окна браузера он никуда не съезжал?

А вот так:

HTML

  1. <div id="menu-centered">
  2. <ul>
  3. <li><a>My first item</a></li>
  4. <li><a>My second item</a></li>
  5. <li><a>My third item</a></li>
  6. <li><a>My fourth item</a></li>
  7. <li><a>My fifth item</a></li>
  8. </ul>
  9. </div>

 CSS

  1. <style type="text/css" media="screen">
  2.  
  3. #menu-centered ul {
  4. text-align: center;
  5. }
  6. #menu-centered li {
  7. display: inline-block;
  8. list-style: none;
  9. padding: 12x;
  10. }
  11.  
  12. </style>