怎么用CSS把网页导航条文字居中?

html-css07

怎么用CSS把网页导航条文字居中?,第1张

文字居中用到css2.0中的text-align属性;

text-align属性是针对文字的对齐方式;

其中值包括:left(向左对齐)

center(居中)

right(右对齐)

justify(两端对齐)

inherit(默认对齐方式)

在这里我们将用到:text-align:center属性

1.需要两个小小的图片,分别用来填充背景与分隔条。

2.编写html代码,用ul、li列表。下面是原代码:(包含效果图)

3.然后开始CSS部分。首先:加背景;其次:将竖直列表变成水平,用float:left就可以实现。相应的CSS代码如下(附效果图):

4.最后美化一下,给a标签左右2em的间距,同时加上竖线背景(mainNavBorder.jpg),并弄上:hover时的变化(这里只是让颜色变化) 在上面的CSS基础上,添加如下代码:

1、请问怎么样把导航栏居中显示

你首先要跟导航栏定义一个固定的宽度,一般为了支持1024*768,宽度是760-980之间为好。然后再加一句居中的代码就可以了。具体如:

#nav {

width:800px

margin:0 auto

height:26px

border-bottom:2px solid #2788da

background-color:red

}

2、把每个a之间的距离缩短

修改【#nav li a】里面【margin-left:45px】把45改成10或者更小即可

还有疑问请补充