Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de alinear img con texto... "text-align: middle;" no funciona en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 20/12/2011, 21:16
 
Fecha de Ingreso: marzo-2007
Mensajes: 782
Antigüedad: 17 años
Puntos: 16
alinear img con texto... "text-align: middle;" no funciona

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
  #2 (permalink)  
Antiguo 20/12/2011, 22:04
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: alinear img con texto... "text-align: middle;" no funciona

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")
  #3 (permalink)  
Antiguo 20/12/2011, 22:29
 
Fecha de Ingreso: marzo-2007
Mensajes: 782
Antigüedad: 17 años
Puntos: 16
Respuesta: alinear img con texto... "text-align: middle;" no funciona

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!

Etiquetas: alinear, img, text-align
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:47.