Question

由于某种原因，导航栏中的每个文本位都与右侧对齐。有没有办法改变它，所以它进入导航菜单的每个部分的中心？如果有人知道如何做到这一点，请你帮忙，因为我完全被难倒了。

HTML：

<div id="links">
<nav>
ul>
    <li><a href="students.php">Students</a>
        <ul>
            <li><a href="studentsearch.php">Search</a></li>
            <li><a href="studentdelete.php">Delete</a></li>
        </ul>
<li><a href="teachers.php">Teachers</a>
        <ul>
            <li><a href="teachersearch.php">Search</a></li>
            <li><a href="teacherdelete.php">Delete</a></li>
        </ul>
</li>
    <li><a href="events.php">Events</a>
        <ul>
            <li><a href="eventsearch.php">Search</a></li>
            <li><a href="eventdelete.php">Delete</a></li>
        </ul>
    </li>
    <li><a href="nametag.php">Nametag</a>
    <li><a href="studentsignup.php">SignUp</a></li>
    <li><a href="gallery.php">Gallery</a>

</ul>

CSS：

#links{
text-align: center;
margin-bottom: 20px;
margin-right: 100px;
margin-left: 100px;
background-color:#7A7A99;
padding-bottom: 2px;
padding-right: 50px;
padding-left: 50px;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
}

#links a{
margin:25px;
width:10px;
height: 0px;
font-size: 20px;
margin-top: 3px;
}

nav ul {
background: #A3A3A3; 
background: linear-gradient(top, #A3A3A3 0%, #666666 100%);  
background: -moz-linear-gradient(top, #A3A3A3 0%, #666666 100%); 
background: -webkit-linear-gradient(top, #A3A3A3 0%,#666666 100%); 
box-shadow: 10px 6px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 8px;  
list-style: none;
position: relative;
display: inline-table; 
}

nav ul:after {
    content: ""; clear: both; display: block;

}
nav ul li {
float: left;
}

nav ul li:hover {
    background: #A3A3A3;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
        color: #fff;
    }
nav ul li a {
    display: block; padding: 10px 40px;
    color: #FFFFFF; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
width: 140px;
}

nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
    nav ul ul li a {
        padding: 0px 40px;
        color: #fff;
    }   
nav ul ul li a:hover {
            background: #A3A3A3;
        }

Answer 1

您的锚具有固定宽度，但不足以容纳文本。因此，它溢出到右边。

Answer 2

添加此css

#links{
text-align: center;
margin-bottom: 20px;
margin-right: 100px;
margin-left: 100px;
background-color:#7A7A99;
padding-bottom: 2px;
padding-right: 50px;
padding-left: 50px;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
} 

#links > a{
padding:10px;
font-size: 20px;
}
nav ul {
 background: #A3A3A3; 
 background: linear-gradient(top, #A3A3A3 0%, #666666 100%);  
 background: -moz-linear-gradient(top, #A3A3A3 0%, #666666 100%); 
 background: -webkit-linear-gradient(top, #A3A3A3 0%,#666666 100%); 
 box-shadow: 10px 6px 9px rgba(0,0,0,0.15);
 padding: 0 20px;
 border-radius: 8px;  
 list-style: none;
 position: relative;
 display: inline-table; 
 }
 nav ul:after {
 content: ""; clear: both; display: block;
 }
 nav > ul > li {
 float: left;
 text-align: center; 
 }

nav ul li:hover {
background: #A3A3A3;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
}
nav ul li:hover a {
color: #fff;
}
nav > ul > li > a{
display: block; 
padding: 10px 15px;
color: #FFFFFF; text-decoration: none;
font-size:20px;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0; 
position: absolute; top: 100%;
}

nav ul ul li {
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 10px 20px;
color: #fff;
display:block;
text-decoration:none;
}   
nav ul ul li a:hover {
background: #A3A3A3;
}

EXAMPLE

为什么文本不在导航栏（CSS）中居中对齐？

2 个答案: