Search code examples
htmlcssimagealignmenthtml-lists

align center a UL with only images

I have a <ul> with 6 images, no text. I can't seem to make it be in the center of the page. This is my code.

CSS

.logos{ 
      margin:0 auto; 
      text-align:center;
      display:table;
      float: left;
}

HTML 

<div class="logos" style="margin:0 auto;">
  <ul class="logos">
     <li class="logos"> <img src="imgs/logo1.gif"> </li>
     <li class="logos"> <img src="imgs/logo2.gif"> </li>
     <li class="logos"> <img src="imgs/logo3.gif"> </li>
     <li class="logos"> <img src="imgs/logo4.gif"> </li>
     <li class="logos"> <img src="imgs/logo5.gif"> </li>
     <li class="logos"> <img src="imgs/logo6.gif"> </li>
  </ul>
</div>
Solution

  • You need to change

    .logos{ 
      margin:0 auto; 
      text-align:center;
      display:table;
      float: left;
}

    to

    .logos{ 
      margin:0 auto; 
      text-align:center;
      display:table;

}

    and the content will be in the middle of the page

    Also you need to delete the div because is useless ,you set the same class to the ul and to div