13518219792
style type="text/css"
创新互联公司专注于万荣企业网站建设,自适应网站建设,电子商务商城网站建设。万荣网站建设公司,为万荣等地区提供建站服务。全流程按需策划设计，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
#nav{
width:100%;
}
#navul{
width:80%;
margin:0 auto;
}
#navulli{
width:calc(20% - 20px);
margin:0 10px;
background-color: #ccc;
float: left;
text-align: center;
}
/style
在html中实现文字图片内容居中有三种方法，其中两种使用CSS样式实现，
一直使用原始的html标签内加入“align="center"”（居中）实现。
一、对body加CSS居中样式
!DOCTYPE html
html
head meta charset="gb2312" /
titledivcss5之居中实例/title
style body{text-align:center}
/style
/head body 我会被居中 /body /html
二、对文字外层对象加css居中样式
!DOCTYPE html
html xmlns=""
head
meta charset="gb2312" /
titledivcss5之居中实例/title
style
.divcss5{text-align:center}
/style
/head
body
div class="divcss5"我会被居中/div
div class="divcss5"img src="divcss5-logo-201305.gif" //div
/body
/html
三、之间对文字外层对象加align="center"
!DOCTYPE html
html xmlns=""
head
meta charset="gb2312" /
titlehtml align居中/title
/head
body
div align="center"我会居中的/div
table width="100%"
tr
td align="center"表格中居中/td
/tr
/table
/body
/html
此方法是以前较为常见的方法，直接在html标签内使用align="center"
即可实现对象内图片或文字内容实现居中。
二种方法
1、父级div设置固定宽度后加margin:0 auto; 然后子级div加浮动，即可实现；不过次方法不能无限伸展；
2、在table内插入div，div设置浮动，在table上设置margin:0 auto; 而table不要设置宽度，因为table默认是宽度最小化的，实现居中的效果会比较好，而且可以无限伸展
注：有些老是说table不好，除非是做表格，其他地方绝对不要用，其实我个人是比较喜欢用table布局的，不过重点布局还是div+css，在一些容易出错的或者必须的地方用table也是不错的选择，人人都说div+css布局，我呢可以说是div+table+css布局
navbg 是绝对定位而且宽度是960 不是100%，那就是无法通过margin 0 auto居中
.navbg{position:absolute;
left:50%;margin-left:-480px;/*这句是重点 居中*/
height:40px;
width: 960px;
background: #08A5E0;
box-shadow: 1px 1px 7px #999;
z-index:99;
top: 108px;
}
1.需要两个小小的图片，分别用来填充背景与分隔条。
2.编写html代码，用ul、li列表。下面是原代码：（包含效果图）
3.然后开始CSS部分。首先：加背景；其次：将竖直列表变成水平，用float:left就可以实现。相应的CSS代码如下（附效果图）：
4.最后美化一下，给a标签左右2em的间距，同时加上竖线背景（mainNavBorder.jpg）,并弄上:hover时的变化（这里只是让颜色变化） 在上面的CSS基础上，添加如下代码：
