centrado vertical con %

willyfc · #1 (**permalink**) 22/06/2009, 12:10

Buenas colegas, vengo con una duda. Ya hemos visto muchas veces de como centrar una web horizontal y verticalmente

Cita:

html, body {height:100%; }
#fijo {
position:absolute;
width:200px;
height:200px;
border:1px solid #000;
background:#cff;
left:50%;
margin-left:-100px;
top:50%;
margin-top:-100px;
}

código extraído de Mik.

Ahora, caigo en el dilema de que estoy haciendo mi primera web en flash que esta en %, ya esta hecho de esa manera, y debe tener este tipo de centrado pero no puedo utilizar los margenes en px ya que la caja que lo contiene debe de estar en % y no como en el ejemplo.

Agradecería cualquier ayudilla o sugerencia.

Mikmoro · #2 (**permalink**) 22/06/2009, 12:54

Prueba esto:

Cita:

<!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" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Centrado Vertical 5</title>
<style type="text/css">
html, body {height: 100%;
width: 100%;margin: 0;}
#caja {display: table;
height: 100%;
width: 100%;
position: relative;
}
.centrado {display: table-cell;
vertical-align: middle;
margin: 0 auto;
padding: 0 10px;
height: 100%;
}
.texto {position: relative;
top: 0;
display: block;
background-color: #f00;
color: #fff;
height: 30%;
}
</style>
</head>
<body>
<div id="caja">
<div class="centrado" style="*position: absolute;*top: 50%;*height: 30%">
<span class="texto" style="*top: -50%;*height: 100%">
Texto de prueba, más texto de prueba, otro texto de prueba y el último texto de prueba
</span>
</div>
</div>
</body>
</html>

(cómo me gustan los retos)

P.D.: sólo lo he mirado en IE6 y FF2.

willyfc · #3 (**permalink**) 22/06/2009, 13:22

, mmm, mmm, Mik te estas riendo de mí,

Sabía que tu darías con esta solución, me va genial. Muchas Gracias Mik, un saludo.

PD:No pasarás a dar tu veredicto en la última competencia de CSS?.

Mikmoro · #4 (**permalink**) 22/06/2009, 16:16

Cita:

Iniciado por willyfc

, mmm, mmm, Mik te estas riendo de mí,

No, me rio de mi. Pensaba que iba aser más difícil encontrar la solución y que estaría un ratillo mirando y lo dejaría, pero resulta que ha salido fácil y más rápido de lo esperado.

Cita:

Iniciado por willyfc

PD:No pasarás a dar tu veredicto en la última competencia de CSS?.

Pues pensaba hacerlo, pero lo cierto es que tengo bastante trabajo, y aunque de rato en rato me conecto para ver que hay de nuevo, nunca paso el suficiente tiempo parado como el que habría que dedicarle a una análisis un poco detallado. Y lo mismo que la última vez, lo cierto es que se han dicho bastantes cosas ya, y puede que no pudiera aportar mucho de nuevo.

Lo siento, pero esta vez me ha pillado un poco mal.

Mikmoro · #5 (**permalink**) 22/06/2009, 16:19

Por cierto: es una interesante nueva manera de centrado compatible con tamaño en porcentaje, que añadiré a la colección un día de estos. A tu salud porque tú la has motivado

Calizman · #6 (**permalink**) 22/06/2009, 16:27

Cita:

Iniciado por WillyFC

Sabía que tu darías con esta solución, me va genial. Muchas Gracias Mik, un saludo.

Nada, aqui se agradece poniendo "Yo Soy Mikmorista" y la pagina web de Mikmoro en tu firma. Sino, tus agradecimientos no son tomados en cuenta.

willyfc · #7 (**permalink**) 22/06/2009, 16:33

Cita:

Iniciado por Mikmoro

Lo siento, pero esta vez me ha pillado un poco mal.

Que pena Mik, ya sabes que para muchos de nosotros es importante tu opinión en estos temas,sin desmerecer que Triby hizo un gran trabajo dando varios detalles.Pero el trabajo es primero.

Cita:

Nada, aqui se agradece poniendo "Yo Soy Mikmorista" y la pagina web de Mikmoro en tu firma. Sino, tus agradecimientos no son tomados en cuenta.

Ya vieron como colaboré en el Indice de Recursos

ssclamp · #8 (**permalink**) 22/06/2009, 19:00

Mik, formidable código: claro, conciso y de gran ingenio. Muchas gracias por él.

Testado en ie6, ff3, safari4 (w) y opera9, opera10beta ,chrome2 y ie8... y perfecto.

Por las prisas que has tenido te ha faltado un pequeño valor para que funcione bien en ie7, y me he permitido añadirlo:

<div class="centrado" style="*position: absolute; *top: 50%; *height: 30%; *width: 100%; /*añadido el width para que funcione en ie7*/">

Repito, muchas gracias

Saludos

Calizman · #9 (**permalink**) 22/06/2009, 19:02

Cita:

Repito, muchas gracias

...

Mikmoro · #10 (**permalink**) 23/06/2009, 01:45

Cita:

Iniciado por ssclamp

Testado en ie6, ff3, safari4 (w) y opera9, opera10beta ,chrome2 y ie8... y perfecto.

Estupendo.

Cita:

Iniciado por ssclamp

Ah, muy bien. No había pensado en el ancho porque tampoco willyfc decía nada de eso (creo), pero mejor, así nos aseguramos de que no se cuela nada.

Muchas gracias. Otro contribuyente a la próxima actualización

kseso? · #11 (**permalink**) 23/06/2009, 10:50

Cita:

Iniciado por ssclamp

Pero así se fuerza la aparición del scroll horizontal.

Se evita con

Cita:

.centrado {padding: 0 0.99%; width: 98%; /*resto de propiedades*}

Mi céntimo al index

Mikmoro · #12 (**permalink**) 23/06/2009, 11:15

Huyyyyyyyyy!!!!!! Casi casi.
Veamos:
suponiendo que willyfc quisiera ocupar todo el ancho, bastaría con esta pequeña modificación:

Cita:

.centrado {display: table-cell;
vertical-align: middle;
margin: 0 auto;
height: 100%;
width: 100%;
}

que sería añadir el width del 100 y quitar el padding que tenía ese selector.

Pero teniendo en cuenta que dice:
"debe tener este tipo de centrado pero no puedo utilizar los margenes en px ya que la caja que lo contiene debe de estar en % y no como en el ejemplo."
y que lo de que sea sólo centrado vertical me lo he inventado yo, porque igual quería directamente porcentual y centrado en las dos dimensiones, sería tan fácil como hacer:

Cita:

.centrado {display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
}
.texto {position: relative;
margin: 0 auto;
top: 0;
display: block;
background-color: #f00;
color: #fff;
height: 30%;
width: 70%;
}

willyfc · #13 (**permalink**) 23/06/2009, 11:25

Esta sería la gráfica de lo que en realidad se quisiera lograr, pero como a mi no me gusta estar jorobando, he estado tratando de solucionarlo yo.

digamos que de ancho debería tener 90 o quizá 80%.
para esta tarde veré como queda al final

Jandor · #14 (**permalink**) 23/09/2009, 11:03

Consulta: tu lo que deseas hacer es que la pagina hecha en flash que tienes se centre tanto verticalmente, como horizontalmente en el navegador.....

Si te entendi bien yo lo que he hecho es esto y me ha servido de maravilla en todos los exploradores que he probado, IE, Mozilla, Opera, Safari y Chrome

<table align="center" height="100%">
<tr>
<td valign="middle">

//Aqui iria tu FLASH

</td>
</tr>
</table>

Bueno espero que sea esto lo que deseas, si no es asi mil disculpas pro entender mal....

Mikmoro · #15 (**permalink**) 23/09/2009, 11:14

Es buena tu intención, Jandor, pero se intenta hacer sin usar tablas para maquetar la página, por eso no se utiliza esa solución.

jomaruro · #16 (**permalink**) 23/09/2009, 14:24

Hola:

La verdad, viendo temas como este, con todos los maestros aportando su opinión y su "centimo" me doy cuenta de lo poco que sé de CSS.

Gracias a todos.

Saludos.