Como centralizar listas

Aprenda a centralizar listas usando CSS.

lista centralizada

  • Café
  • Chá
  • Cola

centralizar a lista HTML

Primeiro passo - Adicionar HTML:

colocar <ul> elementos envolvidos no elemento contêiner, por exemplo <div>：

<div class="container">
  <ul class="myUL">
    <li>Café</li>
    <li>Chá</li>
    <li>Cola</li>
  </ul>
</div>

Segundo passo - Adicionar CSS:

colocar <div> elementos alinhados no centro, e <ul> a exibição alterada para inline-block。

ou, você pode alinhar à esquerda os itens da lista para obter uma visão mais organizada:

div.container {
  alinhamento: centro;
{}
ul.myUL {
  exibição: inline-block;
  alinhamento: esquerda;
{}

Experimente pessoalmente

Páginas relacionadas

Tutorial:Alinhamento CSS