- ベストアンサー
CSSで文字を一番下の中央に表示したい！
スタイルシートを使用して文字を一番下の中央に表示する事は出来ますか？ （ウインドウサイズを変更しても常に一番下中央に。） 宜しくお願いします。
- HTML
- 回答数6
- ありがとう数8
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
No.5です。すみません。style属性閉じるの忘れました…。 <span style=" position:absolute; bottom:0%; width:100%; text-align:center;">真ん中・下</span>
その他の回答 (5)
- goldfox
- ベストアンサー率49% (123/249)
No.2にプラスwidth:100%;で。 <span style=" position:absolute; bottom:0%; width:100%; text-align:center;>真ん中・下</span>
- riaza
- ベストアンサー率45% (33/72)
No.2の方の回答で大丈夫そうだと思ったのですが、自分の環境では真中に表示できませんでした。 ので、真中と下を別々に指定して入れ子にしたほうが良いかもしれません。 IE6.0でしか確認してませんが。(^^; <p style="text-align:center;"> <span style="position:absolute; bottom:0%"> 真ん中・下 </span> </p>
お礼
回答どうもありがとうございました。 また宜しくお願いします。
- perla
- ベストアンサー率63% (67/105)
こんにちは。 まず初めに、あまりおススメ出来る方法ではないと断らせてください。 スタイルシートではありませんが、最も簡単に出来ると思う方法です。 ページの<body>直下から</body>直前までを、ひとつのテーブルで囲む。 テーブルのheightを100%に。 セルは上下二つに分け、下のセルには一番下になるテキストを入れる。残りは上のセルに。 下のセルには<TD VALIGN="bottom" ALIGN="center">と指定する。 <body> <table border="0" width="100%" height="100% align="center"> <tr><td> ページ内容 </td></tr> <tr><td valign="bottom" align="center"> 最後の一行 </td></tr> </table> </body> こんな感じですね。 この方法だと、全体をテーブルで囲っているため、全て読み込んでから表示されるので体感的にページが重く感じます。 中に更にテーブルなどがあり、入れ子になっていれば実際重くなって時間がかかることもあります。 また、テーブルの高さは対応していないブラウザでは無視されますので、効果がありません。 レイアウトにテーブルを使用するのもあまり好ましくないこととされています。 以上のような理由で、あまりおススメはしません。 ですが、ページ内の内容が然程多くない（よく見るEnterページのようなものとか、そう長くないテキストのみのページとか）場合は手軽な方法なので、自分も実は使っています。 サーバーにもよりますので、アップロード後の表示速度などチェックして、いけそうだったらご参考にしてください。
お礼
回答どうもありがとうございました。 また宜しくお願いします。
- mameusa
- ベストアンサー率50% (87/174)
<span style="text-align:center; position:absolute; bottom:0%"> 真ん中・下 </span> な感じで自分の所では表示できてます。 style内をスタイルシートにまとめてしまってclassで呼び出しても大丈夫でしょう。
お礼
回答どうもありがとうございました。 また宜しくお願いします。
- koutarou504
- ベストアンサー率44% (182/407)
ちょっと無理みたい・・・。 理由は、どの様にしてブラウザの高さ（縦の長さ）を求めるか・・・。 ジャバスクリプトと組み合わせれば、 ジャバスクリプトでブラウザの高さ（縦の長さ）を求めて、 それを div 要素の高さとして、基点を左端上にし 文字列をvertical-align:baseline(ベースラインあわせ)のtext-align:center(中央)にすれば・・・。 というか、それより背景にして background:no-repeat(１こ) scroll(一緒にスクロールする) center(中央) bottom(下端) url("ＵＲＬ"); とされた方が良いかも・・・。 とりあえず、例示でした。 使えたら使って下さい。 また、詳細が疑問でしたら、改めて御質問下さい。
お礼
回答どうもありがとうございました。 また宜しくお願いします。
お礼
この方法で問題なく表示出来ました。 回答どうもありがとうございました。 また宜しくお願いします。