CSSで文字を一番下の中央に表示したい！

解決済

質問者：GX71
質問日時：2004/12/08 18:09
回答数：6件

スタイルシートを使用して文字を一番下の中央に表示する事は出来ますか？
（ウインドウサイズを変更しても常に一番下中央に。）

宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.6ベストアンサー

回答者： goldfox
回答日時：2004/12/09 12:35

No.5です。

すみません。style属性閉じるの忘れました…。

真ん中・下

- 4
- 件

通報する

この回答へのお礼

この方法で問題なく表示出来ました。
回答どうもありがとうございました。
また宜しくお願いします。

通報する

お礼日時：2004/12/10 00:03

No.5

回答者： goldfox
回答日時：2004/12/09 12:33

No.2にプラスwidth:100%;で。

真ん中・下

- 0
- 件

通報する

No.4

回答者： riaza
回答日時：2004/12/09 11:53

No.2の方の回答で大丈夫そうだと思ったのですが、自分の環境では真中に表示できませんでした。

ので、真中と下を別々に指定して入れ子にしたほうが良いかもしれません。
IE6.0でしか確認してませんが。(^^;



真ん中・下

- 0
- 件

通報する

この回答へのお礼

回答どうもありがとうございました。
また宜しくお願いします。

通報する

お礼日時：2004/12/10 00:02

No.3

回答者： perla
回答日時：2004/12/09 10:36

こんにちは。

まず初めに、あまりおススメ出来る方法ではないと断らせてください。
スタイルシートではありませんが、最も簡単に出来ると思う方法です。

ページの<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ページのようなものとか、そう長くないテキストのみのページとか）場合は手軽な方法なので、自分も実は使っています。
サーバーにもよりますので、アップロード後の表示速度などチェックして、いけそうだったらご参考にしてください。

- 0
- 件

通報する

この回答へのお礼

回答どうもありがとうございました。
また宜しくお願いします。

通報する

お礼日時：2004/12/10 00:01

No.2

回答者： mameusa
回答日時：2004/12/09 10:30

真ん中・下


な感じで自分の所では表示できてます。
style内をスタイルシートにまとめてしまってclassで呼び出しても大丈夫でしょう。

- 1
- 件

通報する

この回答へのお礼

回答どうもありがとうございました。
また宜しくお願いします。

通報する

お礼日時：2004/12/10 00:01

No.1

回答者： koutarou504
回答日時：2004/12/09 02:15

ちょっと無理みたい・・・。

理由は、どの様にしてブラウザの高さ（縦の長さ）を求めるか・・・。

ジャバスクリプトと組み合わせれば、
ジャバスクリプトでブラウザの高さ（縦の長さ）を求めて、
それを div 要素の高さとして、基点を左端上にし
文字列をvertical-align:baseline(ベースラインあわせ)のtext-align:center(中央)にすれば・・・。

というか、それより背景にして
background:no-repeat(１こ) scroll(一緒にスクロールする) center(中央) bottom(下端) url("ＵＲＬ");
とされた方が良いかも・・・。

とりあえず、例示でした。
使えたら使って下さい。
また、詳細が疑問でしたら、改めて御質問下さい。