0

Como eu faço pra deixar uma lista alinhada lado a lado e ao centro? já criei alguns tipos de listas porém no meu computador ela fica certinho, mas em outras fica sempre torto!

segue o código de exemplo:

<ul>
<li> <img width="120px" src="_imagens/ef-1.png"/> <br> <p> texto </p> </li>
<li> <img width="120px" src="_imagens/ef-2.png"/> <br> <p> texto </p> </li>
<li> <img width="120px" src="_imagens/ef-3.png"/> <br> <p> texto </p> </li>  
</ul>

1 Resposta 1

1

Caso o resultado abaixo seja o que você espera, pode adicionar o elemento div no HTML com a classe myClass, colocar o text-aling: center na div e colocar o display: inline-block nos itens da lista li no CSS.

.myClass li{
  display: inline-block;
}

.myClass {
  text-align: center;
}
<div class="myClass">
<ul>
<li> <img width="120px" src="_imagens/ef-1.png"/> <br> <p> texto </p> </li>
<li> <img width="120px" src="_imagens/ef-2.png"/> <br> <p> texto </p> </li>
<li> <img width="120px" src="_imagens/ef-3.png"/> <br> <p> texto </p> </li>  
</ul>
</div>

2
  • Nossa, tão simples! Obrigado pela ajuda, tenha uma boa tarde!
    – Fabio
    Commented 17/08/2017 às 18:36
  • Que bom Fábio, aceite a resposta. Veja como fazendo uma tour: pt.stackoverflow.com/tour Commented 17/08/2017 às 18:37

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .