Question

这是导航栏的CSS代码：

 ul     {
    overflow:hidden;
    margin: 0;
    padding: 0;
    align: center
    list-style-type: none; 
    }



li      {
    float: left}

    a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }

目前，条形图左侧对齐，我希望它位于中心。有人可以解释一下如何做到这一点吗？如果我输入额外的代码行，我需要键入什么，它会在哪里？

这是我的部分HTML标记的代码：

<body>

<ul>

<li><a href=csshomepage.html>Home</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#links">Links</a></li>


</ul>

Answer 1

将li内嵌和锚点显示为inline-block。

ul {
    margin: 0;
    padding: 0;
    text-align: center
}
li {
    display: inline;
    list-style: none; 
}
a:link,a:visited
{
    display:inline-block;
    margin-right: -4px;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active
{
    background-color:#7A991A;
}

Check demo

Answer 2

要使ul居中，您应该应用宽度或最大宽度

ul {
margin:0 auto;
}

Answer 3

你可以这样做：

 ul {
  overflow:hidden;
  margin: 0 auto;
  padding: 0;
  align: center
  list-style-type: none;
  width: 50%;
}

只要您拥有margin: 0 auto;，

width就可以将其置于中心位置。

JSFIDDLE

Answer 4

FIDDLE

ul     {
    overflow:hidden;
   list-style: none;
  padding: 0;
  width: 50%;
  margin: 0 auto;
    //align: center
   // list-style-type: none; 
    }

Answer 5

将此设置为menu.css（如果您的导航将被视为菜单栏）

This contains the .css codes needed for a centered navigation

在页面中心对齐导航栏

5 个答案: