Tema: centrar texto e imagen dentro de una lista
Ver Mensaje Individual
  #10 (permalink)  
Antiguo 06/12/2010, 09:10
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 7 meses
Puntos: 539
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. <head>
  4. <title>Kseso? jugando con css</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. <style type="text/css">
  7. * {margin:0; padding:0; outline: none; position: relative;}
  8. html, body {
  9.   height: 100%;
  10.   width: 100%;
  11.   font-size: 1em;
  12.   font-family: monospace;
  13. }
  14. ul {}
  15. li {
  16.   list-style-type: none;
  17.   float: left;
  18.   width:120px;
  19.   border: 1px solid #444;
  20. }
  21. li a {
  22.   text-decoration: none;
  23.   display: block;
  24.   /*width:100%;*/
  25.   text-align: center;
  26.   background: #cdcdcd;
  27.   padding: 10px 0;
  28. }
  29. li a img {
  30.   display: block;
  31.   margin: 0 auto;
  32.   max-width: 100px;
  33.   background: #fe0;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38.   <ul>
  39.     <li><a href="#"><img src="" alt="" width="15px" height="15px" />Un enlace</a></li>
  40.     <li><a href="#"><img src="" alt="" width="25px" height="15px"  />Enlace dos</a></li>
  41.     <li><a href="#"><img src="" alt="" width="20px" height="15px"  />otro enlace</a></li>
  42.     <li><a href="#"><img src="" alt="" width="10px" height="15px"  />otro más</a></li>
  43.   </ul>
  44. </body>
  45. </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).