html - 使下拉菜单的内容居中

Question

当悬停在导航项目上时，我有一个下拉列表。我希望下拉列表中的每个标签在下拉列表中垂直居中。我已将列表项变为红色以帮助我了解它们的位置。这是我的 html '''

    <nav>
        <ul class= "navList">
            <li class=navListItem><a class="navTag current" 
    href="nehemiahUniversity.html">Home</a></li>
            <li class=navListItem><a class="navTag" href="courses.HTML" >Courses</a></li>
            <li class=navListItem><a class="navTag" href="training.html">Training Material</a>
                <div class="navDropList">
                    <ul>
                        <li class="navDropItem"><a class="dropTag" 
href="training.html#productionSection">Production</a></li>
                        <li class="navDropItem"><a class="dropTag" 
href="training.html#warehouseSection">Warehouse</a></li>
                        <li class="navDropItem"><a class="dropTag" 
href="training.html#qualitySection">Quality Control</a></li>
                        <li class="navDropItem"><a class="dropTag" 
href="training.html#blendingSection">Blending</a></li>
                        <li class="navDropItem"><a class="dropTag" 
href="training.html#officeSection">Office</a></li>
                    </ul>
                </div>
            </li>
            <li class=navListItem><a class="navTag" href="walkthrough.HTML">Walkthrough</a> 
    </li>
        </ul>
    </nav>

    </div>
  </header>

'''

这是我的CSS

 '''
   .navDropList .navDropItem{
    margin-top: 10px;
    background-color: red;
    width: 100%;
    list-style: none;
}


.navDropList{
    padding-top: 40px;
    display: none;
    position: absolute;
    width: 100%;

    background-color:#414141;
}

.navDropList ul{
    margin-bottom: 15%;
}

.navList .navTag:hover .navDropList{
    display: flex;
    align-items: center;
}

.navDropList .dropTag{
    font-size: 20px;
    color:#d3d3d3;
    text-decoration: none;
    font-family: 'Source Sans Pro', sans-serif;
}

.navList .navListItem:hover .navDropList{
    display: block;
}

.navDropList .dropTag:hover{
    font-weight: 900;
}

'''

这是下拉列表的样子

如何让文本在下拉列表中居中？

标签： htmlcss

Answer 1

那是你要的吗？

.navDropList ul{
    margin-bottom: 15%;
    padding-left: 0px;
    text-align: center;
}