Foros del Web - Ver Mensaje Individual

abimaelrc · #6 (**permalink**) 26/09/2010, 19:58

Mira un ejemplo, para que tengas más claro, tomado de araudi.net pero modificado.

Código HTML:

Ver original<!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" xml:lang="es" lang="es-es"> 
<head> 
<title>Centrado vertical 3 - Recursos CSS - araudi.net</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#content{
    position: relative;
    display: table;
    width: 960px;
    height: 100%;
    margin: 0 auto;
}
.alignCenter {
    display: table-cell;
    vertical-align: middle;
    *position: absolute;
    *top: 30%;
}
</style> 
</head> 
<body> 
 
<div id="content">
    <div class="alignCenter"> 
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
            Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
            ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
            Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate 
            eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum 
            felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper 
            nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, 
            eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. 
            Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. 
            Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
        </p>
        <p>
            Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, 
            sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, 
            hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut 
            libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. 
            Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, 
            leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. 
            Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, 
            nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit 
            fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
            cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.
        </p>
    </div> 
</div> 
 
</body> 
</html>

El * antes de position y top, es para que solamente IE lea esos atributos. El porciento de top debes modificarlo de acuerdo a la cantidad de texto que tengas, para que así quede más o menos centrado.