css无序列表怎么居中,使用CSS将无序列表的li元素居中 |
您所在的位置:网站首页 › html让无序列表居中 › 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 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |