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;
}

Answer 2

#nav-wrap .container ul li a { ... }

我认为这是您希望文本居中的地方，应该很容易使用

text-align:center;

Weebly导航栏中的中心内容

2 个答案: