Question

我有一个包含元素的导航栏，我无法将它们置于导航栏的中间位置。我不想使用bootstrap。无论我做什么，它仍然从左侧开始。我最初把ul作为.topnav，但它仍然没有以元素为中心。

HTML：

<html lang="en">
    <body>
        <div class="topnav">
            <ul >
              <li><a class="active" href="index.html">Home</a></li>
              <li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Products</a>
                  <div class="dropdown-content">
                    <a href="#">Computers</a>
                    <a href="#">Tablets</a>
                    <a href="#">Cell Phones</a>
                    <a href="#">Wearable Technologies</a>
                    <a href="#">Accessories</a>
                  </div>
              </li>  
              <li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Brands</a>
                  <div class="dropdown-content">
                    <a href="#">Apple</a>
                    <a href="#">Samsung</a>
                    <a href="#">Lenovo</a>
                    <a href="#">Dell</a>
                    <a href="#">HP</a>
                    <a href="#">Sony</a>
                    <a href="#">Panasonic</a>
                    <a href="#">Motorola</a>
                    <a href="#">HTC</a>
                  </div>
              </li> 
              <li><a href="deals.html">Deals</a></li>
            </ul>
        </div>

    </body>
</html>

CSS：

.topnav{
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align:center;
    align-items: center;
}

.topnav ul{
    list-style-type: none;
    margin: 0 auto;
}

.topnav li {
    float: left;
}

.topnav li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    width:100px;
}

.topnav li a:hover, .dropdown:hover .dropbtn {
    background-color: #111;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.topnav .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav .dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
    display: block;
}

JSFiddle：Python - selenium webdriver stuck at .get() in a loop

Answer 1

更新课程定义

.topnav ul{
    list-style-type: none;
    margin: 0 auto;
  display:inline-block;
}

Updated jsFiddle

Answer 2

.topnav ul{
    list-style-type: none;
    margin: 0;
    display: inline-block;
    -webkit-padding-start: 0;
}

您将不再需要auto元素上的ul x边距且inline-block定位且父级居中对齐，但您可能希望覆盖Safari的自动填充，这将推送在Mac上略微右侧。

Answer 3

使用display：flex AND text-align：center

.topnav{
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    display: flex; //HERE
    text-align: center !important; //HERE
}

Answer 4

将“.topnav ul”类更改为css代码中的以下内容：

    .topnav ul{
        list-style-type: none;
        margin: 0 auto;
        margin-left: 27%;
    }

这会将您的列表移到右侧，从而将其显示在中心位置。

无法居中导航栏元素

4 个答案: