Ver Mensaje Individual
  #6 (permalink)  
Antiguo 21/02/2007, 02:41
Avatar de Mikmoro
Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Tataríiiii, taríiiiii. Css al rescate.

Cita:
Iniciado por axterixv Ver Mensaje
El problema con la soluciòn que planteas es que si el contenido en este caso es muy chico, pues, quedara un gran espacio hacia abajo.
Es que lo queremos todo: que si es grande se centre; que si es pequeño también... ¡Qué exigencias!

Cita:
Lo peor... esto si es algo en lo que el maquetado con tablas se almuerza a CSS.
¿Cómo? ¡Sacrilegio! En este foro no lo digas ni en broma (he maquetado toda mi vida con tablas )

Prueba este código:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Centrado vertical</title>
  <style type="text/css">
html, body { margin: 0pt; padding: 0pt;
height: 100%;
text-align: center;
}
#marco {
margin: auto;
display: table;
width: 750px;
height: 100%;
text-align: left;
}
#contenedor {
margin: auto;
display: table-cell;
vertical-align: middle;
position: relative;
height: 100%;
}
#vertical_ie { width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
#texto {
display:inline-block;
vertical-align:middle;
}
  </style>
</head>
<body>
<div id="marco">
<div id="contenedor"><span id="vertical_ie"></span><span
 id="texto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris pellentesque turpis vel risus. Nullam tincidunt lacus non urna.
Aliquam erat volutpat. Nam placerat, tortor et mollis facilisis, sapien
mauris dapibus mauris, sit amet pharetra tellus sem ut mi. Sed
tincidunt. Aenean tempus volutpat urna. Quisque at neque. Praesent
venenatis lacus ac massa. Sed accumsan luctus enim. Vestibulum massa
dui, scelerisque sed, dictum rhoncus, lacinia eget, tortor. Ut vel
turpis a elit pharetra pulvinar. Aliquam ut nisl ac nisi tristique
eleifend. Donec tristique ipsum id turpis.</p>
<p>Vivamus vitae risus in est dictum faucibus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Ut ut pede et ante faucibus commodo. Cras pulvinar turpis
quis risus. Mauris scelerisque. Cras lectus. Aliquam erat volutpat.
Praesent erat nunc, dictum vel, vehicula quis, rutrum sit amet, arcu.
Donec interdum. Quisque tristique, purus non pulvinar cursus, magna
lectus blandit orci, vitae tristique tellus tellus eget est. Quisque
sollicitudin convallis sem. Nunc justo.</p>
</span>
</div>
</div>
</body>
</html>
Me parece que esta vez va a funcionar, "descreído" .

Y como saques otra pega me oyes

Mikel.