Buenas,
Llevo varios días peleándolme con esto. He encontrado muchos ejemplos en la red, pero ninguno me sirve (o quizás no consiga adptarlo bien).
¿Por favor alguien me echa una mano? Gracias.
Lo que intento es simple: un menú vertical, al que le he añadido iconos. El problema es que no consigo centrar el texto respecto al icono.
|............|
|"icono" .|
|............| texto
Código:
<body>
<section>
<div>
<nav>
<ul>
<div>
<img src="img/logo2.png" width="100%">
</div>
<li><a href="index.php"><img src="img/home.png"> Home</a></li>
<li><a href="?op=alta"><img src="img/alta.png"> Alta de Contacto</a></li>
<li class="home"><a href="?op=baja">Baja de Contacto</a></li>
<li><a href="?op=cambios">Cambios de Contacto</a></li>
<li><a href="?op=consultas">Consultas de Contacto</a></li>
</ul>
</nav>
</div>
El .css :
Código:
ul {
/* seccion menu lista */
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #D2EED4;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
vertical-align: middle;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}