html - Weebly 导航栏中的中心内容

Question

所以我在 Weebly 中选择了一个基本主题，并用我自己的 CSS 和 HTML 完全改变了它。我正在尝试修改水平导航栏。栏本身居中，但栏内列出页面(主页、视频、设计、简历等)的文本不是。下面我包含了负责导航栏的 CSS。感谢您的帮助!

#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
}

#nav-wrap .container {
background:url(nav-bg-light.jpg) repeat-x top;
height:45px;
}

#nav-wrap .container ul {
list-style: none;
}

#nav-wrap .container ul li {
list-style: none;
float: left;
background:url(nav-saperator-light.jpg) no-repeat right;
padding-right:2px;
}

#nav-wrap .container ul > li:first-child a,
#nav-wrap .container ul > li:first-child a:hover,
#nav-wrap .container ul span:first-child li a,
#nav-wrap .container ul span:first-child li a:hover{
border-radius:5px 0px 0px 5px;
}

#nav-wrap .container ul li a {
float: left;
display: block;
font-family: 'Rosario', sans-serif;
color: #262626;
padding: 0px 30px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 14px;
line-height:45px;
text-shadow: 0px -1px 0px #fff;
}

#nav-wrap .container ul li:hover {
background:url(nav-saperator-hover-light.jpg) no-repeat right;
}

#nav-wrap .container ul li a:hover {
background:url(nav-bg-hover-light.jpg) repeat-x top ;
}

#nav-wrap .container ul li:active {
background:url(nav-saperator-active-light.jpg) no-repeat right;
}

#nav-wrap .container ul li a:active {
background:url(nav-bg-active-light.jpg) repeat-x top ;
}

#nav-wrap .container ul li#active {
background:url(nav-saperator-current-light.jpg) no-repeat right;
}

#nav-wrap .container ul li#active a {
background:url(nav-bg-current-light.jpg) repeat-x top ;
}

Answer 1

我想你只需要添加这个:

#nav-wrap .container ul li a {
text-align:center;
}