J'ai un bien meilleur code, fait par moi, il est si gros, juste pour montrer les deux choses ... créer un tableau 4x4 et aligner verticalement plus d'une cellule.
Il n'utilise aucun hack IE, pas d'alignement vertical: middle; du tout...
Il n'utilise pas pour le centrage vertical display-table, display: table-rom; affichage: table-cellule;
Il utilise l'astuce d'un conteneur qui a deux divs, un caché (la position n'est pas correcte mais fait que le parent a la bonne taille variable), un visible juste après le caché mais avec top: -50%; il est donc nécessaire de corriger la position.
Voir les classes div qui font l'affaire: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible
Veuillez m'excuser d'utiliser l'espagnol sur les noms de cours (c'est parce que je parle espagnol et c'est tellement délicat que si j'utilise l'anglais je me perds).
Le code complet:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="en" />
<title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title>
<style type="text/css">
html,body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
div.BloqueTipoTabla{
display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%;
}
div.BloqueTipoFila_AltoAjustadoAlContenido{
display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto;
}
div.BloqueTipoFila_AltoRestante{
display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%;
}
div.BloqueTipoCelda_AjustadoAlContenido{
display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto;
}
div.BloqueTipoCelda_RestanteAncho{
display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto;
}
div.BloqueTipoCelda_RestanteAlto{
display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%;
}
div.BloqueTipoCelda_RestanteAnchoAlto{
display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%;
}
div.BloqueTipoContenedor{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative;
}
div.BloqueTipoContenedor_VerticalmenteCentrado{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%;
}
div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%;
}
div.BloqueTipoContenido_VerticalmenteCentrado_Visible{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%;
}
</style>
</head>
<body>
<h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1>
<div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;">
<div class="BloqueTipoFila_AltoAjustadoAlContenido">
<div class="BloqueTipoCelda_AjustadoAlContenido">
[1,1]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[1,2]
</div>
<div class="BloqueTipoCelda_RestanteAncho">
[1,3]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[1,4]
</div>
</div>
<div class="BloqueTipoFila_AltoAjustadoAlContenido">
<div class="BloqueTipoCelda_AjustadoAlContenido">
[2,1]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[2,2]
</div>
<div class="BloqueTipoCelda_RestanteAncho">
[2,3]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[2,4]
</div>
</div>
<div class="BloqueTipoFila_AltoRestante">
<div class="BloqueTipoCelda_RestanteAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
The cell [3,1]
<br />
* * * *
<br />
* * * *
<br />
* * * *
<br />
Now is the highest one
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
The cell [3,1]
<br />
* * * *
<br />
* * * *
<br />
* * * *
<br />
Now is the highest one
</div>
</div>
</div>
</div>
<div class="BloqueTipoCelda_RestanteAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
This is<br />cell [3,2]
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This is<br />cell [3,2]
</div>
</div>
</div>
</div>
<div class="BloqueTipoCelda_RestanteAnchoAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
This is cell [3,3]
<br/>
It is duplicated on source to make the trick to know its variable height
<br />
First copy is hidden and second copy is visible
<br/>
Other cells of this row are not correctly aligned only on IE!!!
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This is cell [3,3]
<br/>
It is duplicated on source to make the trick to know its variable height
<br />
First copy is hidden and second copy is visible
<br/>
Other cells of this row are not correctly aligned only on IE!!!
</div>
</div>
</div>
</div>
<div class="BloqueTipoCelda_RestanteAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
This other is<br />the cell [3,4]
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This other is<br />the cell [3,4]
</div>
</div>
</div>
</div>
</div>
<div class="BloqueTipoFila_AltoAjustadoAlContenido">
<div class="BloqueTipoCelda_AjustadoAlContenido">
[4,1]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[4,2]
</div>
<div class="BloqueTipoCelda_RestanteAncho">
[4,3]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[4,4]
</div>
</div>
</div>
</body>
</html>