No me centra el contenido de la lista.

[PabloManuel]

Jelou de nuevo.

Tengo una lista para una página de contacto:

Código HTML:

<div class="loca_div_datos">
                <%
                CrearRs "Select * From Sistema Where IdReg = '1'"
                %>
                <ul>
                    <li><img alt="Dirección" src="Images/domi.gif" /><%=Rs("Direccion")%></li>
                    <li><%=Rs("Localidad") & " (" & Rs("Provincia") & ")"%></li>
                    <li><img alt="Dirección" src="Images/tele.gif" /><%=Rs("Telef")%></li>
                    <li><img alt="Dirección" src="Images/email.gif" /><%=Rs("Email")%></li>
                </ul>
            </div>
 

Quiero que en cada línea me salga un pequeño icono y al lado centrado verticalmente el texto, para que quede en la mitad vertical del icono.

Pues bien el texto queda en la línea base.

Las clases:

Código CSS:

.loca_div_datos{
    float: left;
    width: 320px;
    font-size: 12px;
    color: #121212;
}
 
.loca_div_datos li {
    padding: 5px 0px;
    vertical-align: middle;
}
 

He probado con todas las propiedades de vertical-align y siempre se queda en la línea base o con Top arriba.

[alexk]

El "vertical-align: middle;" aplicalo a la imagen

Código CSS:

.loca_div_datos li img{vertical-align: middle;}
 

PD: estamos en el foro de CSS así que al poner el código pon el generado por el navegador, para ayudarte mejor...

[PabloManuel]

Iniciado por alexk

PD: estamos en el foro de CSS así que al poner el código pon el generado por el navegador, para ayudarte mejor...

Pues tienes razón, gracias así lo haré en el futuro, más cómodo.

Bueno, efectivamente me has solucionado el problema, pero no entiendo el por qué ¿No es más lógico centrar el contenido del LI? ¿Es un fallo de CSS?