mvasco mvasco - 9 days ago 7
CSS Question

Center custom navbar menu horizontally

I want to horizontally center a custom navbar menu:

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


}


But it is shown at the left side of the screen,

EDIT:

enter image description here

Answer

The problem was that you were using float left, which while it causes the desired effect of having the list items listed in a horizontal line, it causes them to be float to the left. Instead you should use: 'display: inline', which does the same thing but without the float to the left.

here is the jsfiddle: https://jsfiddle.net/chris2001/Lc57jw4c/1/ with a working answer. :)

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

  }