センターのカスタムナビゲーションバーのメニューを水平

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'を使用する必要があります。これは同じことをしますが、左に浮動小数点がありません。

ここでは、答えが正しく表示されます：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の代わりに、あなたのリンク要素（ul.topnav li）上float: leftとそれを行う必要があり、あなたのul.topnavにtext-align: centerを追加します。あなたのリストが配置されて

/* 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>