- 締切済み
画像の上にテキストを重ねるためにＣＳＳスタイルシートをつくったのですが
Ｄｒｅａｍweaver8にてＨＰをつくっております。 よく背景でない画像の上にテキストがかさなってあるのを見て それに挑戦しているのですが、 下記がＣＳＳのソースです。外部ファイル化しています。 .kasaneru {z-index: 2;} .kasaneru2 { z-index: 1; height: auto; width: auto; top: 300px; right: 120px; overflow: visible; position: absolute; } これをdivやclassでbody内に指定してみたのですが、画像はテキストの上に重なるのですが、肝心のテキストが上にでてくれません。 私の希望は画像の上にテキストを重ねたいのです。 z-indexで数字を大きくしているのにテキストが上にきてくれないのはなぜなのでしょうか？ よろしくお願いいたします。ｍ（_ _）ｍ
- torananoda
- お礼率48% (410/838)
- HTML
- 回答数8
- ありがとう数3
- みんなの回答 （8）
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは #3です。昨日は回答をお休みしていたので返事が遅くなりましたが・・・ 変ですね？ソースを載せる際にはIE6,Firefox2,Opera9で確認してから送るようにしているのですが・・・再確認してみましたが真ん中のちょっと下あたりに配置しているようですが（－－；） 外部CSS『test.css』 .downimg { position:absolute; top:300px; left:300px; z-index:1; width:500px; height:500px; } .uptext { position:absolute; top:500px; left:500px; z-index:2; } 表示HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">" <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="imagetoolbar" content="no"> <link rel="stylesheet" href="./test.css" type="text/css"> <!--↑外部CSSのパスは相対パスか絶対パスで環境に合わせて変更してください↑--> </head><body> <img src="***.gif" alt="背景" class="downimg"> <div class="uptext"> absoluteしたほうが上にきます </div> </body></html> 外部化希望のようなのでそちらにしてみましたがこれをコピペするなりして試してもらえますか？（コピペした場合にはアドレスの前後に余分なもの『？』がつきますので削除してください） 色々やってみたのですがその症状が確認できたのは外部CSSが効いてなかったり記述ミスしていたときに確認できました スタイルシートにはブラウザ固有のものや解釈違いのものも若干ありますが大抵同じような表示にできるはずなのでドリウィはOKで他のはNGということはあまりないとは思うのですが・・・ 上ので確認（真ん中下あたりに配置）できたのであればその左に寄ったものと比較してみてもらえますか？分からなければ（差し支えなければ）そのソースを載せてみてもらえますか？まったく予想がつかないので気になりますので・・・ ※他の2つの場合のソースも同じような記述で確認できます（配置は1つ目が左上、2つ目が300pxの空白ボックスの下に左配置になります） う～～む また長くなってしまった・・・（＞＜）
- goldfox
- ベストアンサー率49% (123/249)
> どのブラウザで見てもきちんとした位置にくるようにするにはどうすればよいでしょうか？ No.2 の回答では気に入らなかったでしょうか。 分かりやすい重ね方だと思ったのですが。 画像の位置を調節したければ、div（.kasane）に余白指定をします。 .kasane {position: relative; margin-top:50px; margin-left:50px;} 文章は親要素（この場合class="kasane"）に対する絶対位置指定していますので、divに合わせて文章も移動します。 普通、重ねは後に書いたものが上に乗ります。z-indexを使えば先に書いたものを上に乗せることができます。 上に乗せていく順にソースを書いていれば、特に必要としないプロパティです。
お礼
すいませんZに執着してしまいまして（’’；） NO2の方が確かにわかりやすいですね。 あらためてNO2の方でやってみたいと思います。
補足
たしかにＮＯ２のが一番カンタンですね（’’；） やってみましたがスムーズにできました！ ありがとうございました！
- Questa
- ベストアンサー率48% (13/27)
ANo.5 です。CSS の注釈に誤りがありました。 .txt-top の 「margin-bottom: -1em; /* 1 行下ろす */」は 位置調整用ではなく、後続余白を調整するためのものでした。 訂正いたします。
- Questa
- ベストアンサー率48% (13/27)
マージン等にマイナスの値を指定する方法もあります。ただし残念なことに、テキストは 1 行限定です。 (HTML) <div class="img-top"><img src="画像" alt="" /></div> <div class="txt-top">画像とテキストの上端を合わせる</div> <div class="img-mid"><img src="画像" alt="" /></div> <div class="txt-mid">画像とテキストのセンターを合わせる</div> <div class="img-bot"><img src="画像" alt="" /></div> <div class="txt-bot">画像とテキストの下端を合わせる</div> (CSS) .img-top { margin-top: 1em; /* 上余白 */ height: 64px; /* 画像の高さ */ } .txt-top { position: relative; top: -64px; /* 画像の高さ分、上に移動 */ margin-bottom: -1em; /* 1 行下ろす */ } .img-mid { margin-top: 1em; /* 上余白 */ height: 64px; /* 画像の高さ */ margin-bottom: -64px; /* テキスト開始位置を上端に移動 */ } .txt-mid { line-height: 64px; /* 画像の高さと同じ */ } .img-bot { margin-top: 1em; /* 上余白 */ height: 64px; /* 画像の高さ */ margin-bottom: -1em; /* テキスト開始位置を 1 行分上に移動 */ } .txt-bot { line-height: 1; }
- k0021
- ベストアンサー率26% (32/120)
わたし場合の作成例 <table background="../pot1/ryu03.jpg"> <tr><th style="font:41px/100% cursive,serif;"><b>龍爪山<br>の歴史</b></th></table> 間違えいたらゴメンネ <b>は、style="font-weight:bold;" 替えてね
- leap_day
- ベストアンサー率60% (338/561)
こんにちは position:absolute;を使用しているのであれば浮き上がった状態で表示されるので特にz-indexを使用しなくても画像の上に配置できると思うのですが・・・ ＞画像はテキストの上に重なるのですが、肝心のテキストが上にでてくれません 画像の方にposition:absolute;を使用しているのでしょうか？ テキストを上にしたいのであればテキストの方にposition:absolute;を使用するようになります <style type="text/css"><!-- .downimg { width:500px; height:500px; } .uptext { position:absolute; top:100px; left:100px; } --></style> <img src="***.gif" alt="背景" class="downimg"> <div class="uptext"> absoluteしたほうが上にきます </div> で、レイアウト上途中でこういうことがしたい場合にはposition:relative;を使用してposition位置の開始点を決めてやります <style type="text/css"><!-- #container { position:relative; } .downimg { width:500px; height:500px; } .uptext { position:absolute; top:100px; left:100px; } --></style> <div style="width:300px;height:300px;"> </div> <div id="container"> <img src="***.gif" alt="背景" class="downimg"> <div class="uptext"> absoluteしたほうが上にきます </div> </div> ※レイアウト上floatなどを使用したりした場合にはrelativeの開始点が異なることがあります z-indexを使用するときは画像、テキスト両方をposition指定したときに使用します <style type="text/css"><!-- .downimg { position:absolute; top:300px; left:300px; z-index:1; width:500px; height:500px; } .uptext { position:absolute; top:500px; left:500px; z-index:2; } --></style> <img src="***.gif" alt="背景" class="downimg"> <div class="uptext"> absoluteしたほうが上にきます </div> 何か長々とすみません ｍ（－－）ｍ
お礼
大変ご丁寧なご説明ありがとうございます。 Ｚ－ｉｎｄｅｘの方でやってみたのですが、Ｆｉｒｅｆｏｘ、ＩＥブラウザで表示するとテキストと画像が左に寄ってしまっていてだめです。Ｄｒｅａｍｗｅａｖｅｒでデザインしている内はきちんとした位置にあります。 どのブラウザで見てもきちんとした位置にくるようにするにはどうすればよいでしょうか？
- goldfox
- ベストアンサー率49% (123/249)
html部分も提示してほしいですが、 z-index: は position プロパティで relative、absolute、fixed を指定している場合に有効だそうです。 http://www.tagindex.com/stylesheet/box/z-index.html .kasaneru { z-index: 2; position: relative;} まあ、z-indexなくてもできますけど。 .kasane {position: relative;} .kasanetext {position: absolute; top:; left:; width:;} <div class="kasane"> <img src="" alt=""> <p class="kasanetext">文章。top:上からの位置; left:左からの位置; width:横幅;で位置を整える。</p> </div>
- benelli
- ベストアンサー率51% (78/152)
CSSの仕様上、z-indexプロパティは「位置決め要素」（どこに表示させたのか明示された要素）以外には適用されません。 DIV要素や画像などのように表示位置を特定できる要素なら適用されますが、BODYなど表示位置などが明確でない要素には適用されません。 ブラウザによって仕様に定められていない以上の機能を有したり、仕様の解釈が異なったりしますので必ずとはいえませんが、ほとんどのブラウザはBODY要素にz-indexを指定しても無効だと考えてください。 スタイル指定は指定先がブロック要素なのかインライン要素かなど、種類によって適用範囲が異なるので気をつけてもらえればと思います。
関連するQ&A
- CSSのスタイルシートについて教えて下さい。
現在、ASP.NETにてメイン画面に使用する４分割のアプリケーションを作りたいと考えているのですがWeb Developer 2005 ではframesetが使えないので代替案を模索していました。 そこでCSSのスタイルシートにて作成しているのですが、見ようみまねでサンプルを加工しても記述を見ても経験が浅い為全く分からなくて困っています。 勉強が足りず恐縮ですがご教示下さい。 ４分割フォームの詳細は ・ヘッダー部分「Title.aspx」→ 両端に画像が入った題名のみのファイル ・左部分「left.aspx」→ 検索ボックスと検索ボタンが４つあり。キーを入力して 次の検索結果フォームへ異動する。 ・右部分「right.aspx」→ left.aspxと全く同じ作りです。 （東日本と西日本が分かれているようなイメージです。） ・下部 → 署名（フォームではなく文字列） <BODY> <HEAD> <link rel="stylesheet" type="text/css" href="pseudoframe_lmr.css"> </HEAD> <DIV class="menu"> メニュー </DIV> <DIV class="bar"> タイトル </DIV> <DIV class="main"> メインコンテンツ </DIV> <DIV class="bar2"> <p align="right">Copyrigth © 2006-2007 Name all rights Reserved</p> </DIV> </BODY> <STYLE> /* Opera/mozilla/共通用CSS */ <!-- BODY{ background-color : #e0fef8; } .menu{ width : 50%; top : 15%; left : 50px; top : 15%; position : absolute; background-color : #e0fef8; z-index : 1; } .bar{ width : 100%; height : 15%; left : 0px; top : 0px; position : fixed; overflow: auto; z-index : 2; } .main{ width : 50%; top : 15%; left : 20%; position : absolute; background-color : #e0fef8; z-index : 1; } .bar2{ width : 100%; height : 15%; left : 0px; top : 85%; position : fixed; overflow: auto; z-index : 2; } --> </STYLE> <!--[if gte IE 5 ]> /* IE5以上に適用させるCSS */ <STYLE> BODY{ width : 100%; margin : 0px; overflow : hidden; padding : 0px; } .menu{ position : absolute ! important; } .bar{ position : absolute ! important; } .main{ height : 70%; overflow: auto; } .bar2{ position : absolute ! important; } </STYLE> <![endif]--> コードを載せましたのでどの様に記述すればよいのかご教示下さいませ。 皆様、宜しくお願い致します。
- 締切済み
- HTML
- CSS検証サービス
ヘッダーと本体の部分のCSSをこの前教えてもらった CSS検証サービスにかけたらエラーが返ってきました。 div { position : relative ; color : white ; } #header {position : fixed ; top : 0px ; left : 0px ; overflow : auto ; width : 100% ; height : 8% ; z-index : 2 ; border-bottom : 1px red solid } #navi{ position : absolute ; left : 50 px ; top : 10 % ; height : 88% ; overflow-x : hidden ; overflow-y : auto ; z-index : 1 ; } #headerではエラーで出ず、#naviのtopとleftで構文的におかしいと出ます。 やっぱりおかしいですか？ちなみにブラウザ上は想定した通りに行っています。
- ベストアンサー
- CSS
- cssで擬似フレームについて
はじめて質問させていただく、CSS初心者のものです。 下記のdivタグを画面中央寄せにする方法はあるのでしょうか？ HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> （width="800" height="180" のflashファイルを入れています） </div> <div id="main"> （ width="700"のコンテンツを作りスクロールさせていま） </div> <div id="footer">テキストを一行入れています</div> </body> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｃｓｓ html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; } #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; } #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; } このような感じなのですがなにかいい方法があればご教授お願いいたします。
- ベストアンサー
- HTML
- CSS適用時に背景画像をテキストの上に上書きする
XHTMLでテキストで入力したものを、CSS適用時に背景画像をテキストの上に上書きして画像に置き換えたのですが、そこがリンクしてる場合オンマウスしてもマウスカーソルが、リンク用のアイコンに切り替わらず困ってます。 ---XHTMLのソース--- <div id="logo"> <h1> <a href="index.html"> <span></span>テキスト部分</a> </h1> </div> ---CSSのソース--- #logo{width:106px;float:left;margin:0;padding:0;} #logo h1{font-size:10px;position:relative;width:106px;height:43px;} #logo span{background:url("../img/logo.gif") no-repeat;width:100%;height:100%;position:absolute;} （購入した本に載っていたテクニックなんで、 h1とspanに対して何でpositionでrelativeとabsoluteを入れる必要があるのかも正直分からない状態です。） ご指導宜しくお願いします。
- ベストアンサー
- CSS
- CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- CSSでのブロックのセンタリングについ
いつもお世話になっております！ BackgroundにFlashを指定して、その上に別のブロックがくるように指定しています。 FlashのCSSの指定が、#flashと#flash object。その上に#flash.sectionが表示されるようにしているのですが、 Flashの大きさとFlash.sectionのWidthが違うせいか、Flash.sectionが画面の中央に表示されません。 FlashのWidthが1800pxでその真ん中（900px地点）からFlash.sectionが表示されてしまいます。 これをうまく、画面の中央に表示されるよう、指定することはできないでしょうか？ ご存知の方、何卒ご教授願います！！！ CSS指定は下記の通りです。 div#sub{ text-align:center; overflow:auto; } #flash { width:1800px; height:340px; margin:0 auto; position:relative; text-align:center; } #flash object { position:absolute; top:0; left:0; z-index:0; } #flash .section { position:relative; z-index:5; width:1000px; text-align:center; margin:0 auto; }
- ベストアンサー
- CSS
- IE6,7で画像の上に載せた文字がずれる
HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>
- ベストアンサー
- CSS
- アメブロｃｓｓ 画像を好きなところに配置
アメブロをやっています。 新cssを使用しているんですが、画像を好きなところに配置（添付画像の水色のハートの位置とかに）しようとするため各サイトをまわり、探しています。 画像はリンクなし、固定にしたいです。 新ｃｓｓ用の画像を好きなところに配置するタグを見つけて実行したんですがF５を押しても、何回やっても画像の半分が記事欄の後ろに行きます。 そこから位置をいじっても動きません。 貼り付けているのはこのタグです。 ｃｓｓへは↓ /* ------------------------------------------------------- */ /* 絶対配置起点を設定 画面の大きさを変えて同じ位置に */ /* ------------------------------------------------------- */ .skinFrame2{ width:1000px;/* コンテンツ幅を設定 */ margin:auto;/* 自動中央寄せ */ position:relative;/* 起点指定 */ } #bk001{ position:absolute; top:220px; left:200px; z-index:99;/*重なりの順序*/ } #aifurex1{ position:absolute; top:220px; left:200px; width:130px; height:150px; overflow:auto; background-color:transparent; z-index:100;/*重なりの順序*/ } フリースペースには↓ <img src="画像のＵＲＬ" id="bk001"> <div id="aifurex1"> 文章 </div> 画像URLはアメブロの画像フォルダ→画像URLをコピーからペーストしています。 今までいろんなタグでやってきましたがいい加減できないので詳しく教えていただけると助かります。
- 締切済み
- ブログ
- 画像の上に、背景を表示させテキストを非表示させたdisplay:block;を表示させたい
よくliなどでテキストを非表示にさせ、背景画像を表示させたメニューがありますが、それを画像の上に表示させる方法を教えてください。 通常ならその画像をcssで背景画像に出来るのですが、 画像に順番ずつじんわり表示させるjavascriptの指示をしており、 その画像をcssで背景画像とするわけにいかないのです。 現在ですと、Dreamweaverのデザインプレビューだと正しい位置にdisplay:block;が存在するのですが、 実際にブラウザで確認すると、何も表示されていないように見えます。 下記がソースです。 よろしくお願いします。 ------------------------------------------------------------ 【HTML】 <div id="containerTop"> <div id="titleTop"> <h1><a href="index.html">タイトル</a></h1> <h2>サイト説明</h2> <ul> <li id="profile"><a href="#">プロフィール</a></li> <li id="photo"><a href="#">写真</a></li> <li id="blog"><a href="#">ブログ</a></li> <li id="contact"><a href="#">お問い合わせ</a></li> </ul> </div> <div id="topbgphoto" class="pics"> <img src="img/top/001.jpg" /> <img src="img/top/002.jpg" /> <img src="img/top/003.jpg" /> </div> </div> ------------------------------------------------------------ 【CSS】 /* container [ ----------------------------------------------------------- */ #containerTop { width:1024px; position:relative; margin:106px auto auto 0; } /* titleTop [ ----------------------------------------------------------- */ #titleTop { width:661px; position: absolute; top: 241px; left: 0px; height: 138px; } #titleTop h1 a{ display:block; text-decoration:none; text-indent:-7777px; width:246px; height:24px; position: absolute; top: 25px; left: 370px; padding:0; font-size:12px; } #titleTop h2{ display:block; text-decoration:none; text-indent:-7777px; width:310px; height:16px; position: absolute; top: 70px; left: 304px; padding:0; font-size:12px; } /* menu [ ----------------------------------------------------------- */ #titleTop ul { position: absolute; top: 87px; left: 0x; padding:0px; list-style:none; } #titleTop li { } #titleTop li a { display:block; text-decoration:none; text-indent:-7777px; height:17px; width:59px; } #titleTop li a:hover { background-image: url(../img/top/menu_ov.jpg); } #titleTop li#profile a{ background-position: 0 0; position: absolute; top:17px; left:344px;} #titleTop li#photo a{ background-position: -70px 0; position: absolute; top:17px; left:414px;} #titleTop li#blog a{ background-position: -140px 0; position: absolute; top:17px; left:484px;} #titleTop li#contact a{ background-position: -210px 0; position: absolute; top:17px; left:554px;} /* ゆっくり表示させる背景画像 [ ----------------------------------------------------------- */ .pics { width:1024px; height:587px; padding: 0; margin: 0; }
- ベストアンサー
- HTML
- CSSについて 入力フォームの上下揃い
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内にて上下中央揃えにしたいのですが どうした良いでしょう？
- 締切済み
- HTML
お礼
ご丁寧にどうもありがとうございます。 なぜかはじめからやったらきちんと表示されるようになりました。 ありがとうございました！