Centrado en CSS
4 seguidores
Hola chicos, para centrar en CSS estoy usando esto:
<code>#outer {
position: absolute;
left: 50%;
top: 50%;
width: 800px;
height: 600px;
margin-left: -400px; /* half of width */
margin-top: -300px; /* half of height */
background-color: transparent;
}
</code>
He estado mirando por ahi y he visto que hay más metodos, pero me pregunto cual seria el mas correcto de todos.
Bueno ya me comentais.
Un saludo
hartum
orange
Pero perrete... ¿por qué no te lees las respuestas antes de contestar?. Si de eso ya hemos hablado
:x
JOEEEEEEEEEEE menud cuajada que llevo en lo alto :oops:
demssite
jejeje pues si de eso ya hablamos.
y para centrado vertical unicamente lo mismo no?
orange
Pero perrete... ¿por qué no te lees las respuestas antes de contestar?. Si de eso ya hemos hablado
:x
hartum
y que me dicen de la fantastica tecnica del "margin:auto;"?? eso si solo sirve para centrar horizontalemente pero me parece mucho menos ñapera.
<code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html,body {
height: 100%;
width: 100%;
margin:0px;
padding:0px;
}
#hartum_capa{
width:100px;
height:100px;
background-color:#990033;
margin: auto;
}
-->
</style>
</head>
<body>
<div id="hartum_capa">ole, ole oleeeee</div>
</body>
</html>
</code>
jgarciaher
Efectivamente, Orange tiene mucha razón. En una web que no me quedaba centrada en el explorer utilicé:
#todo {
background: #FFFFFF;
width: 800px;
border: 5px solid #FFFFFF;
margin-right: auto;
margin-left: -400px;
position: absolute;
left: 50%;
top: 10px;
}
Cuando antes había utilizado el:
margin-right: auto;
margin-left: auto;
y que sólo había funcionado en firefox. Pero con la primera opción se me arregló el problema y para los centrados siempre lo utilizo.
demssite
Entendido TOODO!!
Gracias Mr Orange
orange
Por cierto voy a pasar este hilo a "Programación cliente"
orange
demssite
Tengo par de dudillas, te comento:
<div class="quote">
orange
<blockquote>/* Esto es bueno meterlo SOLO para Explorer, via comentarios condicionales */</blockquote>
</div>
No entiendo que me quieres decir aqui
Pues que como el apaño del text-align es necesario sólo para Explorer, mi recomendación es no meterlo en la CSS principal (yo es que utilizo una CSS limpia y luego enlazo otra, via comentarios condicionales, para las guarrerías de Explorer)
demssite
<div class="quote">
orange
<blockquote>Todos los navegadores que respetan los estándares, incluso Explorer 6, pillan la primera técnica, la ñapa del text-align hay que meterla para los Explorer 5.0 y 5.5 de Windows.</blockquote>
</div>
Osea que con la primera ténica no funcionaria en los explorer 5 y 5.5 de Windows no?
La técnica del position: absolute + margin: negativo funciona en todos lados excepto en IEMac al que le ocultamos la parte de vertical y sólo centra en horizontal.
La técnica del margin: 0 auto funciona en todos sitios excepto en los Explorer 5.x Windows para lo que tienes que meter lo del text-align
No sé si te ha quedado claro
demssite
Muchas gracias Borja, tas hecho una hacha jajajajaj.
Tengo par de dudillas, te comento:
orange
/* Esto es bueno meterlo SOLO para Explorer, via comentarios condicionales */
No entiendo que me quieres decir aqui
orange
Todos los navegadores que respetan los estándares, incluso Explorer 6, pillan la primera técnica, la ñapa del text-align hay que meterla para los Explorer 5.0 y 5.5 de Windows.
Osea que con la primera ténica no funcionaria en los explorer 5 y 5.5 de Windows no?
orange
Para centrar el vertical y horizontal ese, aunque yo lo metería de esta manera (ya que si no Explorer 5 Mac te corta la mitad del contenido):
<code>#outer {
position: absolute;
left: 50%;
top: 0%;
width: 800px;
height: 600px;
margin-left: -400px; /* half of width */
margin-top: 0px;
background-color: transparent;
}
/* Ocultamos IEMac \*/
#outer {
top: 50%;
margin-top: -300px; /* half of height */
}
/* Fin Ocultacion */
</code>
Por supuesto Explorer Mac sólo te lo centra en horizontal, pero al menos muestra todo el contenido.
No te voy a poner el link para que no lo utilices, pero si alguna vez te encuentras una web en la que ves que esa técnica funciona en Explorer Mac es porque utilizan el rastrero truco de hacer entrar al navegadore en modo Quiks, cosa nada recomendable.
Por otro lado, si lo que quieres es centrar únicamente en horizontal también puedes utilizar esta otra técnica:
<code>
#outer {
width: 800px;
margin: 0 auto;
}
/* Esto es bueno meterlo SOLO para Explorer, via comentarios condicionales */
body {
text-align: center; /* Centrado del sitio web 1/2 */
}
#outer {
text-align: left; /* Centrado del sitio web 2/2 */
}
</code>
Todos los navegadores que respetan los estándares, incluso Explorer 6, pillan la primera técnica, la ñapa del text-align hay que meterla para los Explorer 5.0 y 5.5 de Windows.