CSSで画面の中央にモノを配置する

Read More

ブラウザの画面の中心にフォームを置きたい場合どうすればよいか。

まずしょっぱなCSSで以下のように組んでみた。

■失敗例
<head>
<style type="text/css">
<!--
#id_core {
 width:100%
 height:100%
}
#id_core td {
 text-align:center;
 vertical-align:middle;
}
//-->
</style>
</head>
<body>
<table id="id_core">
 <tr>
  <td>
   フォーム
  </td>
 </tr>
</table>
</body>


結果:

縦がぺしゃんこになって全然height:100%になってない。



うーん、親要素の影響を受けているのかな?

ってことでCSSにbody要素とhtml要素にheight:100%を追加した。


今度は成功した。


■成功例
<style type="text/css">
<!--
html, body {
 height:100%;
}
#id_core {
 width:100%
 height:100%
}
#id_core td {
 text-align:center;
 vertical-align:middle;
}
//-->
</style>


結果:



おkおk。

ログインフォームとかで使えそう。



Category "HTML・JS・CSS" の最新記事