仅使用图像将 UL 居中对齐 [重复]答案

【问题标题】：align center a UL with only images [duplicate]仅使用图像将 UL 居中对齐 [重复]
【发布时间】：2016-09-14 22:14:41
【问题描述】：

我有一个<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>

【问题讨论】：

标签： html css image alignment html-lists

【解决方案1】：

你需要改变

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

到

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

}

内容会在页面中间

另外你需要删除div，因为没有用，你将相同的类设置为ul和div

【讨论】：

谢谢，它现在居中但垂直。我似乎无法使其水平居中... :(
@hal2001 在一行中添加 li { float: left; }
我试过了，但是没用
去掉DIV，样式代码为.logos{ margin:0 auto;文本对齐：居中；显示：表格； } li { 浮动：左； }
谢谢，谢谢，谢谢。它有效！

【解决方案2】：

这样做

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

【讨论】：

【解决方案3】：

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

【讨论】：