Question

我的ul有一些免费的li元素，里面有图像，我想把这些li元素集中在一起。我试图找到解决方案，但我很难搞清楚。你们可以建议一些方法吗？我想用div包围ul，然后将div放在div中。你觉得那会有用吗？我还想提一下，我想保持浮左财产。

以下是代码：

<ul class="thumb">
  <li><img src="photos/home9.jpg" /></li>
  <li><img src="photos/home1.jpg" /></li>
  <li><img src="photos/home3.jpg" /></li>
  <li><img src="photos/home4.jpg" /></li>
</ul>

CSS：

.thumb {
list-style: none;
width: 90%;
margin: auto;
height: 750px;  
}

.thumb li {
float: left;
}

.thumb li img {
height: 200px; 
width: 200px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}

Answer 1

您需要制作自己的inline-blocks，而不是float。简而言之，这样做会导致你的li占用像块元素一样的空间，但行为就像一个内联元素，这将使它们跟随你想要添加到ul元素的text-align:center;。在视觉上，由于缺乏更好的术语，它们看起来有点像“中心浮动”。

这是CSS和jsfiddle（http://jsfiddle.net/rgthree/RTt8g/）：

.thumb {
  list-style: none;
  width: 90%;
  margin: auto;
  height: 750px;
  text-align:center; /* center inline and inline-block elements */
}

.thumb li {
  display:inline-block; /* no float; by making these inline-blocks they will center b/c their parent is text-align:center */
}

.thumb li img {
  height: 200px; 
  width: 200px;
  border: 1px solid #ddd;
  padding: 5px;
  background: #f0f0f0;
}

Answer 2

如果您想将图像居中，那么您需要添加以下内容：

ul {
  text-align: center;
}

如果您将ul作为div的子项居中，则ul将放在中心，但li项不会。因此，如果您将列表项放在中心位置会更好，您还可以将margin: 0; padding: 0添加到ul！如

ul {
  margin: 0;
  padding: 0;
}

我希望通过这种方式，当没有其他边距和填充时，您将图像放在中心！：）

您可以在此处尝试所有这些：http://jsfiddle.net/afzaal_ahmad_zeeshan/b29D8/

Answer 3

如果你想保留 float：left; ，那么你需要在 ul 中添加一个容器 div ，其中宽度和 margin：auto;

以下是：

http://codepen.io/anon/pen/jneEq

但是如果你将宽度精确地设置为图像的宽度，这只会使ul显示为居中。

Answer 4

你能检查一下吗？

我已将css更新为使用text-align: center;

.thumb li {
  text-align:center;
}

http://jsfiddle.net/XZt2b/

Answer 5

如果您对其他选项没有运气，可以使用：

li {
   display:block;
   width: 200px;
   margin: 0 auto;
}

这将确保它们始终位于可用空间的中间。

Answer 6

您也可能想要删除

.thumb li {
    float: left;
}

除了考虑Afzaal的回答

http://jsfiddle.net/EbCZ4/

Answer 7

实现此目的的一种方法是在display: block; margin: auto元素上设置<img>。

http://codepen.io/jessegavin/pen/jBpdo

.thumb {
  list-style: none;
  width: 90%;
  height: 750px;  
}

.thumb li img {
  display: block;
  margin: auto;
  height: 200px; 
  width: 200px;
  border: 1px solid #ddd;
  padding: 5px;
  background: #f0f0f0;
}

Answer 8

我试着用一点点jquery来做，尝试一下：

var totalWidth = 0;
$('.thumb > ul > li').each(function(){
    totalWidth+= $(this).width();
});
$('.thumb > ul').css('width', totalWidth + 'px');

这是完整的demo

使用CSS将无序列表的li元素居中

8 个答案: