How do I make a list aligned side by side and center? I already created some types of lists, but on my computer it stays right, but in others it is always crooked!
follows the example code:
<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>
If the result below is what you expect, you can add the element div in HTML with class myClass , put text-aling: center in div and put display: inline-block in the list items li in 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>