css无序列表怎么居中,使用CSS将无序列表的li元素居中

8 个答案:

答案 0 :(得分：2)

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

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

}

答案 1 :(得分：1)

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

以下是：

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

答案 2 :(得分：1)

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

ul {

text-align: center;

}

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

ul {

margin: 0;

padding: 0;

}

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

答案 3 :(得分：0)

你能检查一下吗？

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

.thumb li {

text-align:center;

}

答案 4 :(得分：0)

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

li {

display:block;

width: 200px;

margin: 0 auto;

}

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

答案 5 :(得分：0)

您也可能想要删除

.thumb li {

float: left;

}

除了考虑Afzaal的回答

答案 6 :(得分：0)

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

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

}

答案 7 :(得分：0)

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

var totalWidth = 0;

$('.thumb > ul > li').each(function(){

totalWidth+= $(this).width();

});

$('.thumb > ul').css('width', totalWidth + 'px');

这是完整的demo