이걸 div 만으로 구현한 trick을 보았습니다만, table을 사용한 것만큼 직관적인 코드는 찾지 못하였습니다. table에는 단 하나의 셀밖에 없어 웝접근성을 어렵게하지도 않습니다.
이걸 div만으로 구현했다고 치고, 그렇게 해서 얻는 이득은 무엇일까요?
재미있는 글이 있더군요. 웹표준 선구자(?)들께서는 벌써 다녀가신듯합니다만...
http://www.dustindiaz.com/totally-compliant-markup/
코드: 모두 선택
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertical align</title>
<style type="text/css">
* {margin:0;padding:0;}
#outertable {
width:300px;
height:300px;
margin:10px;
padding:10px;
border:1px solid #ccc;}
#outertable td {
line-height:100%;
text-align:center;
vertical-align:middle;}
#innerdiv {
margin:auto;
border:1px solid #ccc;}
</style>
</head>
<body>
<table id="outertable" cellpadding="0" cellspacing="0"><tr><td>
<div id="innerdiv">
<p>This center-middle aligned inner box is not for the page layout but for a single text, image or block
always located in a outerbox, which is fixed in size.<br/>
The dimension of the inner box is variable according to its content.</p>
</div>
</td></tr></table>
</body>
</html>
