estoy necesitando ayuda con este tema.. tengo una lista en mi menu que cada imagen que muestra en su costado es distinta, y el texto que aparece despues de imagen se posiciona en el "bottom" del block... la imagen aparece mas arriba porque tiene una pequeña sombra.. lo cual deja la ilucion de que el texto no esta bien alineado con la imagen...
les dejo una imagen para que vean y quizas me pueden ayudar.
http://img198.imageshack.us/i/12345gk.png/
tambien dejo mis codigos:
Código:
<!-- Menú principal -->
<div id="menu">
<ul class="menu">
<li class="inicio">Inicio</li>
<li class="historia">Historia</li>
<li class="variedades">Variedades</li>
<li class="imagenes">Imágenes</li>
<li class="pye">Producción & Exportación</li>
<li class="nys">Nutrición & Salud</li>
<li class="foro">Fóro</li>
</ul>
</div>
<!-- /Menú principal -->
y el css:
Código:
#menu {
width: 300px;
margin: 3em 0 0 8em;
padding: 0;
position: absolute;
overflow: visible; }
ul.menu {
font-size: 150%;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
line-height: 1.5em;
display: block; }
li.inicio {
list-style: none;
list-style-image:url(../_img/_iconos/inicio.png); }
li.historia {
list-style: none;
list-style-image:url(../_img/_iconos/historia.png); }
li.variedades {
list-style: none;
list-style-image:url(../_img/_iconos/variedades.png); }
bueno.. algo asi.. lo que quiero es alinear el texto mas arriba, para que quede "centrado" con la imagen de su costado.. en sentido veritcal obviamente.