나에 의해 만들어진 훨씬 더 나은 코드가 있는데, 두 가지를 모두 보여주기 위해 너무 큽니다 ... 4x4 테이블을 만들고 하나 이상의 셀을 세로로 정렬하십시오.
IE 해킹을 사용하지 않고 세로 정렬을 사용하지 않습니다. 조금도...
수직 센터링 디스플레이 테이블, 디스플레이에는 사용하지 않습니다 : table-rom; 디스플레이 : 테이블 셀;
숨겨진 두 개 div가있는 컨테이너의 트릭을 사용합니다. 하나는 숨겨져 있습니다 (위치는 정확하지 않지만 부모는 올바른 가변 크기를 가짐). 하나는 숨겨진 직후이지만 맨 위에 표시됩니다 .-50 %; 올바른 위치로 이동합니다.
트릭을 만드는 div 클래스를 참조하십시오. BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado
수업 이름에 스페인어를 사용하여 죄송합니다. 스페인어를 사용하기 때문에 영어를 사용하면 길을 잃기 때문에 까다로울 수 있습니다.
전체 코드 :
<?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>