Question

我有<ul>，有6张图片，没有文字。我似乎无法让它成为页面的中心。这是我的代码。

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>

Answer 1

首先删除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 2

您需要更改

string 'ABC,DEF,GHI,JKL,123,456,789,
MNO,PQR,STU,VWX,987,654,321,' (length=57)

到

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

，内容将位于页面中间

此外，您需要删除.logos{ margin:0 auto; text-align:center; display:table; }因为没用，您将同一个班级设置为div和ul

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>

将中心对准UL仅与图像对齐

3 个答案: