締切済み

CSSについて入力フォームの上下揃い

2010/08/03 14:15

CSSについて入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですがどうした良いでしょう？

Tetu1217
お礼率0% (0/1)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

みんなの回答

藤田朋郎（@hujitomo）
ベストアンサー率54% (39/71)

2010/08/05 12:56 回答No.1

table に逃げちゃ駄目ですか？ html,body,div,span,h1,h2,h3,h4,h5,h6 { margin:0; padding:0; font-size:100% } html,body { height:100%; } #container { position: relative; width: 780px; height: 100%; margin: 0 auto; border: 1px solid #999; } #header { position: absolute; top: 0; width: 100%; height: 100px; background-color: #4682B4; } #main { position:absolute; top: 0; width: 780px; height: 100%; } #main td { vertical-align: middle; } #footer { position: absolute; bottom: 0; width: 100%; height: 100px; background-color: #4682B4; } <div id="container"> <table id="main"> <tr> <td> <input type="text" name="id"> <input type="password" name="pas"> </td> </tr> </table> <div id="header"></div> <div id="footer"></div> </div> div のまま display: table-cell; とか使ってやってみたけどなんかうまくできなかった… javascript でブラウザの高さを求めれば希望の表示を実現可能ですが、それな面倒くさい事するくらいならおとなしく table 使ったほうがユーザビリティに優れていると思ったのでこんな形に。頭良い人がもっと素敵なコード書いてくれるのに期待。

ログインすると、全ての回答が全文表示されます。