使用HTML和CSS将列表居中

Question

Hope someone can help me, I am trying to center my gallery (list items) and I feel I have tried everything and nothing is working, if someone could point me in the right direction it would much appreciated. 希望有人能帮助我，我正在尝试将我的画廊（列表项）居中，并且我觉得我已经尝试了一切，但没有任何效果，如果有人可以向我指出正确的方向，将不胜感激。 http://www.jamessuske.com/thornwood/gallery.php http://www.jamessuske.com/thornwood/gallery.php

HTML CODE HTML代码

<div class="gallery">
<ul>
<li><a href="pics/1.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon1.jpg" border="0" /></a></li>
<li><a href="pics/2.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon2.jpg" border="0" /></a></li>
<li><a href="pics/3.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon3.jpg" border="0" /></a></li>
<li><a href="pics/4.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon4.jpg" border="0" /></a></li>
<li><a href="pics/5.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon5.jpg" border="0" /></a></li>
<li><a href="pics/6.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon6.jpg" border="0" /></a></li>
<li><a href="pics/7.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon7.jpg" border="0" /></a></li>
<li><a href="pics/8.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon8.jpg" border="0" /></a></li>

CSS CODE CSS代码

.gallery{
width:965px;
float:right;
}
.gallery ul{
list-style-type:none;.gallery li{
float:left;
text-align:center;
}

.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
 }

Answer 1

Centering child elements can be done like this: 居中的子元素可以这样完成：

Apply text-align:center to the parent element 将text-align:center应用于父元素
Remove any float s from children and apply or ensure that the display is inline or inline-block 从孩子float移走任何float ，并应用或确保display是inline或inline-block

So something like this: 所以像这样：

.gallery ul {
    text-align:center;
}
.gallery li {
    float:none; /* or just make sure you don't float them */
    display:inline-block;
}

Should work for you, if your goal is to center the images but have them in rows. 如果您的目标是将图像居中但将它们排成一行，则应该为您工作。

Answer 2

Can't do it with float left: Example http://jsfiddle.net/HerrSerker/KvPPe/ 靠左浮动不能做到这一点：示例http://jsfiddle.net/HerrSerker/KvPPe/

.gallery{
  width:965px;
}

.gallery ul{
  list-style-type:none;
  text-align:center
}

.gallery li{
  display: inline-block;
}
* html .gallery li { /* IE6 */
  display: inline;
}
*:first-child + html .gallery li { /* IE7 */
  display: inline;
}

.gallery ul a {
  display:block;
  text-decoration: none;
  color:#FFF;
  padding:5px 0 0 5px;
}

Answer 3

You are going to continue to have significant problems with all this because you don't have a doctype and you are in 'quirks mode'. 您将继续在所有这些方面遇到重大问题，因为您没有文档类型，并且处于“怪癖模式”。 Add this to your very first line: <!DOCTYPE html> . 将此添加到您的第一行： <!DOCTYPE html> 。

However, by adding the doctype, this may change the whole layout. 但是，通过添加doctype，这可能会更改整个布局。 But that's the cost of not starting off properly. 但这就是无法正确启动的代价。

使用HTML和CSS将列表居中

问题描述

3 个解决方案

解决方案1
1 2011-10-26 22:00:15

解决方案2
0 2011-10-26 22:02:30

解决方案3
0 2011-10-26 22:46:59

使用HTML和CSS将列表居中

问题描述

3 个解决方案

解决方案1 1 2011-10-26 22:00:15

解决方案2 0 2011-10-26 22:02:30

解决方案3 0 2011-10-26 22:46:59

解决方案1
1 2011-10-26 22:00:15

解决方案2
0 2011-10-26 22:02:30

解决方案3
0 2011-10-26 22:46:59