建站技术分享网

我们会经常用到无序列表或有序列表来展示一些内容。但是，有时候我们想让这些列表居中显示，这时候该怎么办呢？下面介绍几种css方法可以实现ul li居中显示。

方法一：使用text-align属性

	
	

		
	


ul{ text-align:center; } li{ display:inline-block; margin:0 10px; }

这种方法比较简单，直接设置ul的text-align属性为center即可。但是li元素需要设置display属性为inline-block才能保证每个元素都在同一行，并且设置margin属性来隔开每个li元素。

方法二：使用display:flex属性

ul{ display:flex; justify-content:center; } li{ margin:0 10px; }

这种方法使用flex布局，设置ul的display属性为flex即可。同时使用justify-content属性来水平居中ul元素。每个li元素设置margin属性来隔开每个li元素即可。

方法三：使用position属性

ul{ position:relative; margin:0; padding:0; list-style:none; text-align:center; } li{ position:relative; display:inline-block; margin:0 10px; padding:0; }

这种方法可以使用position属性来实现，先将ul的text-align属性设置为center，然后对li元素设置display属性为inline-block，也可以设置float属性来实现。最后，设置ul和li的position属性为relative即可。

综上所述，使用这三种方法都可以实现ul li居中显示，选择哪种方法取决于具体情况。如果项目中使用了flex布局或已经定义了基础样式，那么相应的方法也会有变化。希望以上方法对您有所帮助。