[SOLUCIONADO] Menú vertical, centrar texto respecto a icono

inthalas · #1 (**permalink**) 09/01/2016, 14:28

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

DesgraciadoGabo · #2 (**permalink**) 09/01/2016, 22:03

Espero te sirva, analizalo comparalo y nota que te hizo falta, saludos

https://jsfiddle.net/68j4qLqy/

inthalas · #3 (**permalink**) 11/01/2016, 11:54

Cita:

Iniciado por DesgraciadoGabo

Espero te sirva, analizalo comparalo y nota que te hizo falta, saludos

[url]https://jsfiddle.net/68j4qLqy/[/url]

Muchas gracias!.
Veo la diferecia en el código. Pero lo he probado y sigue sin resultar. No centrar el texto verticalmente respecto al logo.

Un saludo.

g3kdigital · #4 (**permalink**) 12/01/2016, 12:37

Puedes hacer lo siguiente:

Código CSS:

Ver originala img
{
  display: inline-block;
  vertical-align: middle;
}

De esa manera la imagen se comportará como texto en linea y este soporta la propiedad vertical-align: middle

inthalas · #5 (**permalink**) 15/01/2016, 15:45

Perfecto, ya funciona!
Gracias.