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

＆＃13;

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

＆＃13;

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

＆＃13;

代码中的一点修改。在整页中查看结果。

Answer 2

根据您的需要尝试调整边距和填充。如果你有topnav的任何父元素，那么使用align属性。

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

Answer 3

问题在于你使用左浮动，虽然它会导致列表项列在水平线中所需的效果，但它会使它们向左浮动。相反，你应该使用：'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 4

在您的链接元素（display: inline-block）上使用float: left代替ul.topnav li，并text-align: center添加ul.topnav。

＆＃13;

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

＆＃13;

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

＆＃13;

水平居中自定义导航栏菜单

4 个答案: