Главная страница » CSS » Выравнивание «плавающих» элементов списка по центру на CSS

Выравнивание «плавающих» элементов списка по центру на CSS

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

алфавитный указатель по центру

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

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

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

html разметка списка


.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;
}

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

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • G
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z

 

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

смещение ul вправо

Добавить комментарий