中心定製導航欄菜單水平

Question

我想水平居中的自定義導航欄菜單：

<ul class="topnav" id="myTopnav" > 
    <li><a href="index.html"><img class="img-responsive" width="60px" src="imagenes/botones/logo_hera.png" /></a></li> 
    <li><a href="doctores.html"><img class="img-responsive" width="180px" src="imagenes/botones/doctores_boton.png" /></a></li> 
    <li><a href="#news"><img class="img-responsive" width="180px" src="imagenes/botones/hospitales_boton.png" /></a></li> 
    <li><a href="#news"><img class="img-responsive" width="180px" src="imagenes/botones/farmacias_boton.png" /></a></li> 
    <li><a href="#news"><img class="img-responsive" width="180px" src="imagenes/botones/laboratorios_boton.png" /></a></li> 

    <li class="icon"> 
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
    </li> 
</ul> 

CSS：

/* Remove margins and padding from the list, and add a black background color */ 
ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 10px; 
    width: 100%; 
    display: inline-block; 


} 

/* Float the list items side by side */ 
ul.topnav li {float: left; 
    margin: 10; 
    padding: 10; 

    } 

/* Style the links inside the list items */ 
ul.topnav li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 

    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 40px; 


} 

但它在屏幕的左側所示，

編輯：

Answer 1

的問題是，你是使用浮動左，這同時使具有在水平行中列出的列表項的期望的效果，它使他們成爲浮動到左側。相反，你應該使用：'display：inline'，它做同樣的事情，但沒有浮動到左邊。

這裏是jsfiddle：https://jsfiddle.net/chris2001/Lc57jw4c/1/與工作的答案。 :)

ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 10px; 
    width: 100%; 
    text-align: center; 
} 

/* Float the list items side by side */ 
ul.topnav li { 
    /* float: left; */ 
    margin: 10; 
    padding: 10; 
    display: inline; 
    /* text-align: center; */ 

    } 

Answer 2

/* Remove margins and padding from the list, and add a black background color */ 
 
ul.topnav { 
 
    display: inline-table; 
 
    margin: 0; 
 
    padding: 10px; 
 
    list-style-type: none; 
 
} 
 
.links{ 
 
    text-align: center; 
 
}  
 
/* Float the list items side by side */ 
 
ul.topnav li {float: left; 
 
    margin: 10px; 
 
    padding: 10px; 
 

 
} 
 

 
/* Style the links inside the list items */ 
 
ul.topnav li a { 
 
    display: inline-block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 40px; 
 
}

<div class="links"> 
 
      <ul class="topnav" id="myTopnav" > 
 
      <li><a href="index.html"><img class="img-responsive" width="60px" src="imagenes/botones/logo_hera.png" /></a></li> 
 
      <li><a href="doctores.html"><img class="img-responsive" width="180px" src="imagenes/botones/doctores_boton.png" /></a></li> 
 
      <li><a href="#news"><img class="img-responsive" width="180px" src="imagenes/botones/hospitales_boton.png" /></a></li> 
 
      <li><a href="#news"><img class="img-responsive" width="180px" src="imagenes/botones/farmacias_boton.png" /></a></li> 
 
      <li><a href="#news"><img class="img-responsive" width="180px" src="imagenes/botones/laboratorios_boton.png" /></a></li> 
 
      <li class="icon"> 
 
      <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
 
      </li> 
 
     </ul> 
 
     </div>

在代碼稍加修改。在整頁中查看結果。

Answer 3

根據您的需要嘗試調整邊距和填充。 如果您有任何topnav父元素，然後使用align屬性。

ul.topnav { 
    list-style-type: none; 
    margin: 2% auto ; 
    padding: 15% auto; 
    width: 100%; 
    display: inline-block; 
} 

Answer 4

使用display: inline-block，而不是float: left你的鏈接元素（ul.topnav li），並添加text-align: center您ul.topnav應該這樣做。

/* Remove margins and padding from the list, and add a black background color */ 
 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 10px; 
 
    width: 100%; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
/* Float the list items side by side */ 
 
ul.topnav li { 
 
    display: inline-block; 
 
    margin: 10; 
 
    padding: 10; 
 
} 
 

 
/* Style the links inside the list items */ 
 
ul.topnav li a { 
 
    display: inline-block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 

 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 40px; 
 
}

<ul class="topnav" id="myTopnav" > 
 
    <li><a href="index.html"><img class="img-responsive" width="60px" src="https://dummyimage.com/60x60/000/fff" /></a></li> 
 
    <li><a href="doctores.html"><img class="img-responsive" width="180px" src="https://dummyimage.com/180x180/000/fff" /></a></li> 
 
    <li><a href="#news"><img class="img-responsive" width="180px" src="https://dummyimage.com/180x180/000/fff" /></a></li> 
 
    <li><a href="#news"><img class="img-responsive" width="180px" src="https://dummyimage.com/180x180/000/fff" /></a></li> 
 
    <li><a href="#news"><img class="img-responsive" width="180px" src="https://dummyimage.com/180x180/000/fff" /></a></li> 
 

 
    <li class="icon"> 
 
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
 
    </li> 
 
</ul>