alinear img con texto... "text-align: middle;" no funciona

[eybel]

La verdad que siempre con el mismo problema y esta vez no lo puedo solucionar:

Estoy creando un menu que tiene iconos a la izquiera. Pero no los puedo alinear al medio. uso un reset.css que pone el span a text-align:middle;

Probe poniendo cada uno en un "span" tag y no funciona. Probe poner el texto solo en "span" tag y no funciona. Y tambien probe sin span tag como en la 1er linea de "img" las demas las deje con span tags. Cual es la mejor manera? con span o sin span? y como soluciono esta alineacion. gracias

(ICONO)MEN1 (ICONO)MENU2 (ICONO)MENU3 (ICONO)MENU4

Código PHP:

   <div id="d_menu">
 
               <img src="images/icons/messages.png" alt="messages" width="20" height="20" style="vertical-align:middle"> Messages
               <span id="s_menu"><img src="images/icons/profile.png" width="18" height="18" alt="profile">Profile</span>
               <span id="s_menu"><img src="images/icons/notifications.png" width="18" height="18" alt="notifications">Notifications</span>
               <span id="s_menu"><img src="images/icons/settings.png" width="18" height="18" alt="settings">Settings</span>
            
   </div> 
   

[cristian_cena]

Prueba convirtiendo los span a bloque (display:block) darle un alto (height:25px;) y darle un line-height igual al alto (line-height:25px;)
Luego si tu menú es horizontal flota los span y el img ( img, span{float:left}) y dale un width a los span para limitarle el ancho.
Finalmente dale overflow:hidden a #d_menu para limpiar el flotado.

Si con esto no funciona ya debería al menos estar cerca. Saludos.

pd: no uses mas de una vez un id, para eso estan las clases (class="esto")

[eybel]

Gracias si estubo cerca igual agregue mas divs y me quedo asi:

Código PHP:

  <div id="d_menu">
 
               <span class="s_menu"><img src="images/icons/messages.png" alt="messages" width="18" height="18"></span>
             <div class="item_menu">Messages</div>
               <span class="s_menu"><img src="images/icons/profile.png" width="18" height="18" alt="profile"></span>
             <div class="item_menu">Profile</div>
               <span class="s_menu"><img src="images/icons/notifications.png" width="18" height="18" alt="notifications"></span>                          
            <div class="item_menu">Notifications</div>
               <span class="s_menu"><img src="images/icons/settings.png" width="18" height="18" alt="settings"></span>
             <div class="item_menu">Settings</div>
            
   </div> 
   

Y si lo de los ID ya lo tenia en cuenta jaja. gracias!