多语言展示
当前在线:630今日阅读:138今日分享:33

css如何让ul居中

在css中,实现ul居中,主要通过固定其宽度(width),使用margin:0 auto来实现ul居中显示。下面小编举例讲解css如何让ul居中。
工具/原料
1

html+css

2

代码编辑器:Zend Studio 12.5.1

方法/步骤
1

新建一个html文件,命名为test.html,用于讲解css如何让ul居中。

2

在test.html文件中,使用div标签创建一个模块,并设置其id属性为myid,下面将通过该id设置其css样式。

3

在test.html文件中,在div内,使用ul标签和li标签创建一个列表,代码如下:

4

在test.html文件内,编写标签,页面的css样式将写在该标签内。

5

为了展示明显的效果,在css标签内,通过myid设置div的宽度为300px,高度为300px,边框为1px的灰色边框。

6

在css标签内,设置ul标签的样式,使用width属性设置ul的宽度为80px,使用margin:0 auto设置ul居中显示。

7

在浏览器打开test.html文件,查看实现的效果。

总结:

1、创建一个test.html文件。 2、在文件内,创建一个div模块,在div内,使用ul li创建一个列表。 3、在css中,主要通过设置ul为固定宽度,并使用margin:0 auto实现ul居中显示。

注意事项

ul的宽度(width)必须固定才能实现居中,因为ul默认宽度是100%。

推荐信息