Question

如何对齐要居中的图像列表？我让他们彼此分开25个像素。它们以内联方式显示。现在我想把它们放在页面上。现在他们向左转。

HTML

<div class="thumbnail-photos">
  <ul>
      <li><img src="images2.jpg height="100" width="100" /></li>
      <li><img src="images2.jpg height="100" width="100" /></li>
      <li><img src="images2.jpg height="100" width="100" /></li>
      <li><img src="images2.jpg height="100" width="100" /></li>
  </ul>
</div>

CSS：

.thumbnail-photos ul li {
    display: inline;
    margin: 25px;
}

我在text-align: center;和.thumbnail-photos ul li

中尝试了.thumbnail-photos ul li img

Answer 1

尝试以页面为中心 - 诀窍是指定包装容器的宽度：

.thumbnail-photos {
    width: 900px; /* any width you want */
    margin: 0 auto;     
}

Fiddle

Answer 2

请更新以下css。

.thumbnail-photos ul li {
display: inline-block;
margin: 25px;
width:120px;/*---any specific width to check----*/
}
.thumbnail-photos ul li img {
display:block;
margin:0 auto;
}

如何将图像置于列表中心？

2 个答案: