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

Question

我的 ul 有一些免费的 li 元素，其中有图像，我想将这些 li 元素居中。我试图找到解决方案，但很难弄清楚。你们能建议一些方法吗？我正在考虑用 div 围绕 ul，然后将 ul 置于 div 的中心。你认为这行得通吗？我还想提一下，我想保留 float left 属性。

代码如下:

<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

你需要让你的 li 成为 inline-blocks，而不是 float。简而言之，这样做会导致您的 li 像 block 元素一样占用空间，但表现得像内联元素，这将使它们遵循您要添加的 text-align:center;到你的 ul 元素。在视觉上，它们看起来有点像“居中 float ”，因为没有更好的术语。

这是 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;
}