List Alignment

Asked

Viewed 86 times

0

How do I get a list lined up side by side and center? I have created some types of lists but in my computer it is 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>
html

1 answer

1

If the result below is what you expect, you can add the element div in the HTML with class myClass, put the text-aling: center in div and put the display: inline-block in the list items li in the 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>

  • Wow, so simple! Thanks for the help, have a good afternoon!

  • Good Fabio, accept the answer. See how to make a tour: https://answall.com/tour

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.