仅用图像对齐UL中心

Question

我有一个6张图片的<ul>，没有文字。我似乎不能把它放在书页的中间。这是我的密码。

CSS

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

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

Answer 1

你需要改变

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

至

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

}

内容将在页面的中间。

此外，您还需要删除div，因为这是无用的，因此您将同一个类设置为ul和div。

Answer 2

首先，删除div的类名。ul和div具有相同的类名。

将float:left交给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>

​

Answer 3

像这样做

​

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

​