Foros del Web - centrado vertical con %

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - centrado vertical con % (http://www.forosdelweb.com/f53/centrado-vertical-con-712027/)

willyfc

22/06/2009 11:10

centrado vertical con %

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

22/06/2009 11:54

Respuesta: centrado vertical con %

:risa:

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

22/06/2009 12:22

Respuesta: centrado vertical con %

:pensando::pensando:, mmm, mmm, Mik te estas riendo de mí,:'(:risa:

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

22/06/2009 15:16

Respuesta: centrado vertical con %

Cita:

Iniciado por willyfc (Mensaje 2973816)

:pensando::pensando:, mmm, mmm, Mik te estas riendo de mí,:'(:risa:

:risa: 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 (Mensaje 2973816)

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

22/06/2009 15:19

Respuesta: centrado vertical con %

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

22/06/2009 15:27

Respuesta: centrado vertical con %

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. :risa::risa::risa: :patada:

willyfc

22/06/2009 15:33

Respuesta: centrado vertical con %

Cita:

Iniciado por Mikmoro (Mensaje 2974164)

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.

:risa::risa:

Ya vieron como colaboré en el Indice de Recursos:risa::risa::risa::risa:

ssclamp

22/06/2009 18:00

Respuesta: centrado vertical con %

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

22/06/2009 18:02

Respuesta: centrado vertical con %

Cita:

Repito, muchas gracias

... :patada:

Mikmoro

23/06/2009 00:45

Respuesta: centrado vertical con %

Cita:

Iniciado por ssclamp (Mensaje 2974415)

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

Estupendo.

Cita:

Iniciado por ssclamp (Mensaje 2974415)

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?

23/06/2009 09:50

Respuesta: centrado vertical con %

Cita:

Iniciado por ssclamp (Mensaje 2974415)

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 :-D

Mikmoro

23/06/2009 10:15

Respuesta: centrado vertical con %

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%;
}

:-D

willyfc

23/06/2009 10:25

Respuesta: centrado vertical con %

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.

http://img134.imageshack.us/img134/2...nttulo2jpp.jpg

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

Jandor

23/09/2009 10:03

Respuesta: centrado vertical con %

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

23/09/2009 10:14

Respuesta: centrado vertical con %

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

23/09/2009 13:24

Respuesta: centrado vertical con %

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.

:adios:

La zona horaria es GMT -6. Ahora son las 21:50.