align center a UL with only images

Question

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>

Prasath V · Answer 1 · 2016-09-14T14:14:41.690

First of all remove the class name for div. ul and div have the same class name.

Give float:left to li

.logos{ 
      margin:0 auto; 
      display:table;
}
.logos li{
  float:left;
}

<div>
  <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>

score 0 · Accepted Answer · answered Sep 14 '16 at 14:08

0

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

answered Sep 14 '16 at 14:08

O.Rares

1,031
1
16
19

thank you, it is centered now but vertically. i can't seem to make it centered horizontally... :( – hal 2001 Sep 14 '16 at 14:13
@hal2001 to be in a line add li { float: left; } – O.Rares Sep 14 '16 at 14:33
i tried but it goes all left – hal 2001 Sep 14 '16 at 14:34
Remove the DIV and the style code will be .logos{ margin:0 auto; text-align:center; display:table; } li { float: left; } – O.Rares Sep 14 '16 at 14:35
thank you, thank you, thank you. it works! – hal 2001 Sep 14 '16 at 14:37
@hal2001 Good luck! – O.Rares Sep 14 '16 at 14:38

score 0 · Answer 3 · answered Sep 14 '16 at 14:14

Do it like this

.logo_wrapper {
  width: 100%;
  position: relative;
}
.logos {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
}
.logo {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  float: left;
}

<div class="logo_wrapper">
  <ul class="logos">
    <li class="logo">
      <img src="imgs/logo1.gif">
    </li>
    <li class="logo">
      <img src="imgs/logo2.gif">
    </li>
    <li class="logo">
      <img src="imgs/logo3.gif">
    </li>
    <li class="logo">
      <img src="imgs/logo4.gif">
    </li>
    <li class="logo">
      <img src="imgs/logo5.gif">
    </li>
    <li class="logo">
      <img src="imgs/logo6.gif">
    </li>
  </ul>
</div>

align center a UL with only images

3 Answers3