Como centralizar uma lista horizontal em uma Div em CSS

Escrito por sean mann | Traduzido por karina silva
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como centralizar uma lista horizontal em uma Div em CSS
Você pode usar CSS e HTML para controlar a aparência de sua página da Web (Comstock/Stockbyte/Getty Images)

Ao criar uma página da Web, pode ser útil usar CSS para centralizar uma lista horizontal, como um menu clicável. Você pode usar CSS, que é uma linguagem de folha de estilo, ao lado do HTML para controlar a aparência de sua página. Os estilos CSS, muitas vezes, são exibidos de forma imprevisível em diferentes navegadores da Web, por isso é importante testar completamente sua página antes de publicá-la. Uma lista não ordenada (ul, do inglês "unordered list") é um elemento em nível de bloco, de modo que você pode usar a propriedade de largura para criar um efeito centralizado.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Abra seu arquivo HTML em um editor de texto, como o Bloco de Notas do Windows.

  2. 2

    Acrescente os estilos CSS necessários para a lista horizontal na seção "<head>" de seu arquivo HTML, adicionando o seguinte código:

    <style type="text/css"> .myclass { text-align: center; } .myclass ul { width: 275px; margin: 0px auto } .myclass li { display: block; float: left; height: 50px; line-height: 50px; margin: 5px; width: 125px; border: solid 1px black; } </style>

    A largura da lista (ul) representa a soma da largura e as margens dos itens horizontais (li).

  3. 3

    Crie uma lista horizontal na seção "<body>" do arquivo HTML, adicionando o seguinte código:

    <div class="myclass"> <ul> <li>first item</li> <li><div>second item in div</div></li> </ul> </div>

    A tag "ul" especifica uma lista não ordenada. A tag "li" corresponde a um item da lista. Os itens da lista usam os estilos CSS que correspondem aos definidos acima.

  4. 4

    Salve o arquivo HTML e carregue-o em seu servidor da Web para visualizar a lista horizontal centralizada.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível