Не так давно столкнулся с ситуацией, когда требовалось выровнять элементы списка с  заданным свойством float по центру блока. Наиболее типичный для этого случай – центрирование горизонтального меню. Моей же целью оказался алфавитный указатель, который выстраивался в одну линию.

В отличии от меню, алфавитный указатель всегда будет иметь одинаковое количество элементов, соответствующее количеству букв. Значит, мы сможем контролировать нахождение всех элементов на одной горизонтальной линии на разных устройствах.

В нашем случае, элементы не содержат в себе вложенных списков, в то время как пункт меню может раскрываться вниз, отображая подменю.  Это дает нам возможность без последствий использовать свойство overflow : hidden для родительского блока.

Таким образом, формируем следующую разметку и стили:

.wrap {
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    width: 400px;
    border: 2px solid #000;
}
ul {
    position: relative;
    float: left;
    left: 50%;
    padding: 0;
        margin: 0;
 }
li {
    position: relative;
    float: left;
    list-style-type: none;
    right: 50%;
    padding: 5px 10px;
}

Вот что получается (список по центру):

Пунктирной линией обозначены границы родительского блока. Список ul сместился вправо