1. <ul class="cf">
  2. <li><a>ボキャブラ天国</a></li>
  3. <li><a>ミュージックステーションスーパーライブ</a></li>
  4. <li><a>タモリ倶楽部</a></li>
  5. <li><a>世にも奇妙な物語</a></li>
  6. <li><a>ブラタモリ</a></li>
  7. </ul>
  1. ul {
  2. display: inline-block;
  3. position: relative;
  4. left: 50%;
  5. vertical-align: middle;
  6. -ms-transform: translateX(-50%);
  7. -webkit-transform: translateX(-50%);
  8. transform: translateX(-50%);
  9. }
  10. li { float: left; }
  11. li:nth-child(n+2) { padding-left: 1px; }
  12. li a { background: #86c0de; }
  13. li a:hover { background: #68abcd; }