今までテーブルでレイアウトしていたサイトをCSSで作り直したいと思い勉強しながらやっています。
それで、幅400×高さ60のテーブルに背景色を設定し、フォームのテキストボックスとボタンを、セルの縦中央に配置するのと同じ見た目をテーブルタグを使わず実現するにはどのようにスタイル組めば良いでしょうか。
ズバリの回答か、良いヒントになるサイトがありましたら教えて下さい。
No.1
72
0
20pt
http://tohoho.wakusei.ne.jp/css/index.htm
そのファイルは現在ありません
div.hoge {
width: 400px;
height: 60px;
background-color: #4488EE;
padding-top:18px;
}
こんな感じでどうでしょうか？
指定にvalignのようなモノはありませんので上からのスペースをpadding-topで指定しています。
No.2
720
5pt
HTMLクイックリファレンス
↓こんな感じでいかがでしょうか。
<html>
<head>
<STYLE TYPE=”text/css”>
.input-area {
width: 400px;
height: 60px;
background-color: #ccccff;
text-align: center;
}
</STYLE>
</head>
<body>
<div class=”input-area”>
<form action=”#” method=”get”>
<input type=”text” size=”40” name=”my_text”>
</form>
</div>
</body>
</html>
ついでに私がいつも参考にしているサイトをご紹介します。
CYBER@GARDEN
回答ありがとうございます。
でもtext-alignですと横（水平方向）中央ですよね？ 横ではなく「縦（垂直方向）」中央にしたいのです。
No.3
980
5pt
他の回答を見た所、「縦書き」をやりたいんですか?
コレってブラウザ依存、ハッキリ言うと MSIE 5.5、6.0
でしか表示できないものになってしまいますが。
それでもイイのなら、次の設定を追加です。
writing-mode: tb-rl;
回答ありがとうございます。
いえ、縦書きではなく普通に横書きです。そもそも中央にしたいのはフォームのテキストボックスとボタンですので…。
私のコメントが何か誤解を招く部分があったようで、失礼致しました。
No.4
720
20pt
1のtanpaです。
18pxの根拠ですが、こればかりは見ながら調整するしか無いと思います。
テキストボックスやボタンのサイズがブラウザによって異なる場合があるからです。
強引な方法として
div.hoge {
width: 400px;
height: 60px;
background-color: #4488EE;
}
.vcenter {
position:relative;
margin:0;
top: 20px;
height: 20px;
}
↑input要素に適用してください。
これは微妙でしょ？（＾＾；
ご返答ありがとうございます。
やはり見ながら調整なのですね。
強引な方法はやってみましたらSafariでは驚くくらいビシッときっちり中央になりましたが、Mac版IE5ではボックスからフォームのテキストボックスがはみ出してしまいました。強引なだけあってブラウザ解釈の差が大きそうですね…。
No.5
230
40pt
長くなったので↑のURLを開いてください。
個人的には、ムリに table を使わないよりか、
CSSとtable を使ったほうがシンプルにできるかなあとは思いますが。
http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
スタイルシート 縦中央(垂直中央)
回答ありがとうございます！
下のURLは知ってましたが、上のはとても参考になりました。
>CSSとtable を使ったほうがシンプルにできるかなあと
はい、CSSのみでの実現が複雑だったらそうしようと思っています。
No.6
691
40pt
これでどうでしょう？
<STYLE type=”text/css”>
div.input {
width: 400px;
line-height: 60px;
background-color: #DDDDDD;
border: solid 1px;
</STYLE>
回答ありがとうございます！
line-heightを使う手もあるのですね。
これもほぼ中央になりました！
ただMacIE5だとボタンにもline-heightが適用されてしまうので、工夫が必要になりますね。
--
色々方法が得られて助かりました！皆様ありがとうございました。
89
89
2
1
1
回答ありがとうございます！
なるほど、paddingで指定するという方法があるのですね。
やってみましたらだいたい真ん中に来ました。でも18pxという数字はどこから計算するのでしょうか？