Como centrar nuestra Web; div, img, swf etc… con CSS

miguelortega — Tue, 14 Jul 2009 05:04:45 +0000

Bueno en el corto tiempo que llevo aprendiendo CSS me eh topado con muchas (sino miles) de formas y estrañas maneras para centrar una web o un div o lo que sea con estilos para no hacercelas muy cardiaca les pongo unos cuantos ejemplos que si, vale, si centran nuestra web pero vamos no soy quien para decir que es correcto e incorrecto pero si lo estandar y lo menos complicado; lo consideraremos por ahora como “valido” y “correcto” vale?.

Maneras Incorrectas para centrar div

Centrar con margen en el body body{margin:100px;}

Esta no me la sabia, recien la vi me gusto esta un poco “rara”, lo usaban para una web con diseño flexible, pero no tenia tamaños, fijos, ni con porcentajes ( % ), y pues solo se veia correcto en FF, y con resoluciones de 1200×800 como minimo… la mia 1024×768 se veia horrible pero bueno.

<h1>Esta es la forma incorrecta para centrar una Web</h1>
<h2>con proporciones fluidas - margin:100px;</h2>
<div class="contenedor">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

*{margin:0;padding:0;}
body{background:#DDD;margin:100px;}
h1, h2{text-align:center;}
.contenedor{background:#EEE;border:5px solid #CCC;padding:10px;}

Ver ejemplo en linea

Centrar con etiqueta HTML

<center>
<h1>Esta es la forma incorrecta para centrar una Web</h1>
<h2>con proporciones fluidas - con etiqueta <center></h2>
<div class="contenedor">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</center>

Obvio que esta parte no sirbe mas que para, nada vamos jaja, todo lo hace el

*{margin:0;padding:0;}
body{background:#DDD;}
h1, h2{text-align:center;}
.contenedor{background:#EEE;border:5px solid #CCC;padding:10px; width:940px; }

Ver ejemplo en linea

Centrar con tablas

<table align="center" width="940">
	<tr>
		<td>
            <h1>Esta es la forma incorrecta para centrar una Web</h1>
            <h2>con proporciones fluidas - con <table></h2>
            <div class="contenedor">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
		</td>
	</tr>        
</table>

Aqui quitamos el reset CSS del *{margin:0;}, para que tome automatico por el navegador.

1
2
3

body{background:#DDD;}
h1, h2{text-align:center;}
.contenedor{background:#EEE;border:5px solid #CCC;padding:10px;  }

Ver ejemplo en linea

Bueno hay otra manera, que es con el “body{text-align:center;}” luego otro div centrado de la manera correcta con “.midiv{margin:0 auto;text-align:center;}” el text-align del body nos sirve para alinear horizontalmente en IE6 pero esto no la agrego ya que no lo veo util, si tenemos un correcto.

1 2	<html xmlns="http://www.w3.org/1999/xhtml">

Centrar un div correctamente

Centrar div con margin .midiv{margin:auto;}

Esta manera para centrar divs es la mas usada y mas rapida y talves la mas mmm “correcta” y comun (me incluyo y la recomiendo).

<h1>Esta es la forma correcta para centrar una Web con margin auto</h1>
<h2>con proporciones fijas o fluidas</h2>
<div class="contenedor">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

*{margin:0;padding:0;}
body{background:#DDD;}
h1, h2{text-align:center;}
.contenedor{margin:auto;width:940px;background:#EEE;border:5px solid #CCC;padding:10px;}

Ver ejemplo en linea

Centrar div con posision absoluta .midiv{position:absolute;}

Esta igual es valida, cuando queremos posicionar un elemento absoluto y que no se mueva con otras resoluciones de pantalla cuando este no esta relativo a otro div, y algunos decidieron aplicarlo a su body o bien a su div contenedor.

<h1>Esta es la forma correcta para centrar una Web</h1>
<h2>con proporciones fijas o fluidas</h2>
<div class="contenedor">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
ok tenemos un acho de 940px + 20px de padding (10px de izquierda y derecha) + 10px de border (5px de izquierda y derecha) tenemos mmm... <em>1,2 llevo uno, brinca la tablita</em> 970px de ancho total, entonces con un left al 50% debemos quitarle un margen izquierdo de la mitad de nuestro ancho total ok? y son "margin-left:-485px;" ok? y listo...

*{margin:0;padding:0;}
body{background:#DDD;}
h1, h2{text-align:center;}
.contenedor{background:#EEE;border:5px solid #CCC;padding:10px;width:940px;position:absolute; left:50%; margin-left:-485px;}

Ver ejemplo en linea

Bueno en conclusion para centrar elementos, texto, etc… aqui va lo siguiente.

Centrar un div con
css

1	.contenedor{margin:auto;}

Centrar text con css

1 2	p{text-align:center;}/Esto centrara el texto dentro de las etiquetas P/ .contenedor{text-align:center;} /Tambien podemos indicar que todo texto dentro de esta clase este centrado/

Centrar una imagen con
css

Directo para centrar una imagen pues, no, debe tener un contenedor para decir en que o en donde se esta centrando y con el anterior de “text-align:center;” basta

1	.contenedor{text-align:center;}

Centrar una tabla con
css

Asi de la nada no podemos centrar una tabla, (amenos que sea posicion, absoluta, pero como que no es util para eso tenemos los benditos divs). con el “text-align:center;” se centrara el texto asi que no, nos vale.

<table align="center">
    <tr>
        <td></td>
    </tr>
</table>

1	table{margin:auto;}

Centrar un SWF (Flash) con
css

<div class="contenedor">
<object type="application/x-shockwave-flash" data="miflash.swf" width="500" height="130">
	<param name="movie" value="flash.swf" />
	<param name="quality" value="high" />
	<img src="miflash.png" width="500" height="130" alt="" />
</object>

Como se mensionaba antes, para posicionar elementos con valga la redundancia “posicion” absoluta, se les da si “top” y “left” al 50% y luego se les resta un margen relativo a su ancho y su alto.

1	.contenedor{position:absolute;top:50%;left: 50%;margin-top: -500px;margin-left: -130px;}

Y esto nos centrara nuesto SWF, y aligual eso es todo por hoy espero les sirva de algo, ya estoy hasta los coj…. de los divs y css por hoy jeje chao.

ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » alinear

Como centrar nuestra Web; div, img, swf etc… con CSS

Maneras Incorrectas para centrar div

Centrar con margen en el body body{margin:100px;}

Centrar con etiqueta HTML

Centrar con tablas

Centrar un div correctamente

Centrar div con margin .midiv{margin:auto;}

Centrar div con posision absoluta .midiv{position:absolute;}

Centrar un div con css

Centrar text con css

Centrar una imagen con css

Centrar una tabla con css

Centrar un SWF (Flash) con css

Centrar un div con
css

Centrar una imagen con
css

Centrar una tabla con
css

Centrar un SWF (Flash) con
css