Centrar un div con CSS

En este link, nos explica como centrar un DIV con CSS.

Ese metodo nos evita hacer uso de tablas y asi optimizamos el renderizado final del HTML (tal como lo hemos visto en un articulo citado en este blog).

Como ejemplo, pude mejorar mi “Espere por favor” o “Cargando…” mandandolo al pie de la pagina. Fijense:

Antes:

<div id="esperaDIV" style="position:absolute;width:100%;height:100%;display:;z-Index:1500">
   <table width="100%" height="100%" cellspacing="0" cellpadding="0">
   </tr>
      <td valign="bottom">
         <div style="width:100%;background-color:#CDF821;height:22px;background-image:url(i/indicator_background.green.gif)">
            <table align="center">
            <tr>
               <td><img src="i/indicator.gif" width="16" height="16"></td>
               <td><div style="width:140px;height:16px;text-align:center"><font face="Verdana" size="2"><nobr>Espere por favor...</nobr></font></div></td>
            </tr>
            </table>
         </div>
      </td>
   </tr>
   </table>
</div>

Depues:

<div id="esperaDIV" class="barraStatus espera" align="center">
   <img src="i/indicator.gif" width="16" height="16">Espere por favor...
</div>

La clase CSS:

.barraStatus {
	position: absolute; top: 100%; width: 100%; height: 22px;
	margin-top: -22px;
}
.espera {
	background-image:url(i/indicator_background.green.gif);
	height: 22px; margin-top: -22px;
}
.espera img {
	vertical-align:bottom; margin-right:15px;
}

Link: http://www.dezinerfolio.com/2007…

2 comments so far

  1. fernando on

    y esto funciona en mozilla?


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: