centrar texto e imagen dentro de una lista

[javihb]

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

[ArturoGallegos]

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

Código CSS:

#lista_menu_sup li a img{margin:auto;}
 

[enrique4480]

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:

<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.

[javihb]

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>

[Portgaz]

trata de agregarles una class a cada <li> y con css dale la propiedad de text-align:center;

[Portgaz]

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 :)

[enrique4480]

Código HTML:

<ul>
  <li><div class="nada"><div class="esto_centra_vertical"></div><a href="http://www.cartagena.es">www.cartagena.es</a></div></li>
  <li><a href="http://www.cartagena.es">Enlace sin fonfo en div</a></li>
</ul>
 

Código CSS:

.nada
{
 background: transparent url(flecha_ct_es.png) no-repeat center top;
 height: 50px;
 width: 130px;
 text-align: center;
 border: 1px solid red;
}
 
.esto_centra_vertical
{
 height: 25px;
 width: 100%
}
 

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.

[Portgaz]

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

[enrique4480]

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.

[kseso?]

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

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; outline: none; position: relative;}
html, body {
  height: 100%;
  width: 100%;
  font-size: 1em;
  font-family: monospace;
}
ul {}
li {
  list-style-type: none;
  float: left;
  width:120px;
  border: 1px solid #444;
}
li a {
  text-decoration: none;
  display: block;
  /*width:100%;*/
  text-align: center;
  background: #cdcdcd;
  padding: 10px 0;
}
li a img {
  display: block;
  margin: 0 auto;
  max-width: 100px;
  background: #fe0;
}
</style>
</head>
<body>
  <ul>
    <li><a href="#"><img src="" alt="" width="15px" height="15px" />Un enlace</a></li>
    <li><a href="#"><img src="" alt="" width="25px" height="15px"  />Enlace dos</a></li>
    <li><a href="#"><img src="" alt="" width="20px" height="15px"  />otro enlace</a></li>
    <li><a href="#"><img src="" alt="" width="10px" height="15px"  />otro más</a></li>
  </ul>
</body>
</html>
 

Iniciado por Portgaz

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).