Как центрировать неупорядоченный список без родительского DIV

В CSS центрирование неупорядоченного списка (

) с сохранением левого выровненные элементы списка могут быть затруднительными без использования родительского элемента div. Вот как добиться этого эффекта:

Приведенный фрагмент кода с родительским элементом div использует text-align: center для элемента div и display: inline-block для ul для центрирования списка. Однако для этого метода требуется родительская оболочка div.

Чтобы центрировать неупорядоченный список без родительского div, свойства CSS, такие как поля и text-align, не могут эффективно использоваться, поскольку

не имеет фиксированной ширины. .

Решение заключается в том, чтобы настроить

так, чтобы он вел себя как таблица, используя display: table. Это создает структуру, подобную таблице, где строки определяются элементами списка (
• ). При установке поля Margin: 0 auto для
  таблица (т. е. список) центрируется внутри содержащего ее элемента.

  Вот код CSS, который достигает этого эффекта:

  ul {
    display: table;
    margin: 0 auto;
  }

  Для демонстрации приведем фрагмент кода, в котором используется предоставленный HTML-код, но без родительского элемента div:

  
  
  
    
  
      
  56456456
      
  4564564564564649999999999999999999999999999996
      
  45645
    
  
  
  

  Этот код центрирует неупорядоченный список на странице, сохраняя при этом выравнивание элементов списка по левому краю.