Foros del Web » Creando para Internet » CSS »

centrar texto e imagen dentro de una lista

Estas en el tema de centrar texto e imagen dentro de una lista en el foro de CSS en Foros del Web. Hola vereis estoy terminado una web pero me surge un problemilla con un menu con forma de lista....dentro de esa lista tengo en cada <li> ...
  #1 (permalink)  
Antiguo 05/12/2010, 10:11
 
Fecha de Ingreso: octubre-2004
Mensajes: 230
Antigüedad: 13 años, 1 mes
Puntos: 0
centrar texto e imagen dentro de una lista

Hola vereis estoy terminado una web pero me surge un problemilla con un menu con forma de lista....dentro de esa lista tengo en cada <li> una imagen y un texto y tienen que salir arriba la imagen centrada y debajo su texto correspondiente centrado.....y el problema es que con el codigo como lo tengo ahora en IE7 sale justo como lo quiero pero en IE8 y firefox 3x.....me sale la imagen a la izquierda....vamos que no sale centrada..como puedo solucionar esto.....ah la dirección web es esta para que veais de que hablo, seria el menu superior de la pagina

http://cpc.cartagena.es

Un saludo y gracias
  #2 (permalink)  
Antiguo 05/12/2010, 11:24
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: centrar texto e imagen dentro de una lista

perdon lo de la etiqueta font... en cuanto tu problema prueba añadirle a la imagen un margin auto

Código CSS:
Ver original
  1. #lista_menu_sup li a img{margin:auto;}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Última edición por ArturoGallegos; 05/12/2010 a las 11:41
  #3 (permalink)  
Antiguo 05/12/2010, 11:54
 
Fecha de Ingreso: diciembre-2010
Ubicación: valencia
Mensajes: 203
Antigüedad: 7 años
Puntos: 11
Respuesta: centrar texto e imagen dentro de una lista

puedes poner la imagen como fondo de un div, en este div el texto centrado y creas otro div transparente, este lo usaras para bajar el texto verticalemente lo que necesites. no se si es lo que pides exactamente, pero el resultado seria esto:



el borde rojo lo he dejado aproposito. y el codigo seria algo asi:

Código HTML:
Ver original
  1. <li><div class="nada"><div class="esto_centra_vertical"></div><a href="#">www.cartagena.es</a></div>

"nada" seria el div contenedor y el que tiene la imagen como fondo, "esto_centra_vertical" hace eso mismo, tanto como necesites mediante el height de este div.


PD: He contestado pq cuando vi el mensaje en tu respuesta ponias "error de post", de todos modos que pruebe de las 2 formas y que adapte lo que mejor le venga.
  #4 (permalink)  
Antiguo 05/12/2010, 13:20
 
Fecha de Ingreso: octubre-2004
Mensajes: 230
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: centrar texto e imagen dentro de una lista

a ver....lo primero gracias por responder...pero con lo que me decis no me soluciona nada....usando #lista_menu_sup li a img{margin:auto;} con firefox 3.x y ie8 pues is ca...pero con ie7 no.

Despues, este codigo tien que ser accesible, asi que no puedo poner una imagen como fondo por temas de accesibilidad para que el texto que lean las personas discapacitadas visuales sea coherente.......alguna otra forma de centrar una imagen y un texto??? de esta forma??

<li><a href=""><img src="miruta">texto1</a></li>
  #5 (permalink)  
Antiguo 05/12/2010, 13:42
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: centrar texto e imagen dentro de una lista

trata de agregarles una class a cada <li> y con css dale la propiedad de text-align:center;
  #6 (permalink)  
Antiguo 05/12/2010, 13:45
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: centrar texto e imagen dentro de una lista

Ps vamos que tu pagina esta hecha trizitas con Opera.
A solucionarlo...

P.D: ese menu superior se puede maquetar de distinta manera, sin necesidad de usar las listas :)
  #7 (permalink)  
Antiguo 05/12/2010, 16:57
 
Fecha de Ingreso: diciembre-2010
Ubicación: valencia
Mensajes: 203
Antigüedad: 7 años
Puntos: 11
Respuesta: centrar texto e imagen dentro de una lista

Código HTML:
Ver original
  1. <ul>
  2.   <li><div class="nada"><div class="esto_centra_vertical"></div><a href="http://www.cartagena.es">www.cartagena.es</a></div></li>
  3.   <li><a href="http://www.cartagena.es">Enlace sin fonfo en div</a></li>
  4. </ul>

Código CSS:
Ver original
  1. .nada
  2. {
  3.  background: transparent url(flecha_ct_es.png) no-repeat center top;
  4.  height: 50px;
  5.  width: 130px;
  6.  text-align: center;
  7.  border: 1px solid red;
  8. }
  9.  
  10. .esto_centra_vertical
  11. {
  12.  height: 25px;
  13.  width: 100%
  14. }


No creo que de problemas, en lynx se muestra perfectamente el enlace, igual que cualquier otro. la verdad no estoy puesto en accesibilidad pero si una imagen de fondo en un div da problemas, muchisimas paginas tienen ese problema.
  #8 (permalink)  
Antiguo 05/12/2010, 17:08
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: centrar texto e imagen dentro de una lista

el truco de los diseñadores webs.
Si tienes problemas al acomodar una imagen y abajo de esta un texto, dentro de un li y que ambas esten centradas.

Por que simplemente no usas una sola imagen.

Crea una imagen que contenga la imagen ya abajito el texto (PERO QUE TODO SEA UNA IMAGEN)
y ya solo la agregas al li dentro de un div y con css añadale al div un ancho y altura fijo, que seria exactamente la altura y anchura de la imagen y problema solucionado :D
  #9 (permalink)  
Antiguo 05/12/2010, 17:16
 
Fecha de Ingreso: diciembre-2010
Ubicación: valencia
Mensajes: 203
Antigüedad: 7 años
Puntos: 11
Respuesta: centrar texto e imagen dentro de una lista

portgaz eso es exactamente lo que le estoy diciendo pero con una ventaja, si tu metes el texto en una imagen un navegador que no muestre imagenes no le mostrara el texto, con la forma que le propongo se lo mostrara ya que la imagen del fondo del div "no ocupa espacio" y el div secundario hace exactamente eso que dices, bajar el texto tanto como necesites.

pongo bien la imagen que antes el fondo no estaba centrado:



dejo los bordes en rojo para que se vea el centrado respecto a los bordes.

Última edición por enrique4480; 05/12/2010 a las 17:26
  #10 (permalink)  
Antiguo 06/12/2010, 09:10
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: centrar texto e imagen dentro de una lista

Mire a ver si lo siguiente le sirve como base y orientación:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <style type="text/css">
  6. * {margin:0; padding:0; outline: none; position: relative;}
  7. html, body {
  8.   height: 100%;
  9.   width: 100%;
  10.   font-size: 1em;
  11.   font-family: monospace;
  12. }
  13. ul {}
  14. li {
  15.   list-style-type: none;
  16.   float: left;
  17.   width:120px;
  18.   border: 1px solid #444;
  19. }
  20. li a {
  21.   text-decoration: none;
  22.   display: block;
  23.   /*width:100%;*/
  24.   text-align: center;
  25.   background: #cdcdcd;
  26.   padding: 10px 0;
  27. }
  28. li a img {
  29.   display: block;
  30.   margin: 0 auto;
  31.   max-width: 100px;
  32.   background: #fe0;
  33. }
  34. </head>
  35.   <ul>
  36.     <li><a href="#"><img src="" alt="" width="15px" height="15px" />Un enlace</a></li>
  37.     <li><a href="#"><img src="" alt="" width="25px" height="15px"  />Enlace dos</a></li>
  38.     <li><a href="#"><img src="" alt="" width="20px" height="15px"  />otro enlace</a></li>
  39.     <li><a href="#"><img src="" alt="" width="10px" height="15px"  />otro más</a></li>
  40.   </ul>
  41. </body>
  42. </html>
Cita:
Iniciado por Portgaz Ver Mensaje
P.D: ese menu superior se puede maquetar de distinta manera, sin necesidad de usar las listas :)
¿Sería tan amable de indicar qué otra manera?
Y lo más importante, documente que esa otra manera es más apropiada y correcta que el uso de una lista no clasificada (ul) para mostrar un grupo de enlaces que conforman un menú.
Gracias
Hasta entonces, permítame manifestar mi desacuerdo con ellas y recomendar que no le hagan caso (en ese punto en concreto).

Etiquetas: lista
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 06:45.