- ベストアンサー
text-alignについての疑問
スタイルシートに {text-align:center;position:absolute;bottom:50px;} と入れて、一番下にあるCopyright©○○という位置を固定して、真ん中にしたいんですが そうなりません。 position:absoluteを使ったときはセンタリングできないのでしょうか？？ また、この場合はどうやればいいのでしょうか？？ もう一つ質問させて頂きます。 <span style="text-align:center">aaaaaaaaaaaa aaaaaaaa</span> とやってもセンタリングできません。 <span>を<div>に変えると真ん中に来ます。 <span>タグだと"text-align:center"は使えないということでしょうか？？ 一つでもいいのでわかる方いらっしゃいましたらよろしくお願い致します。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
描画領域に対するセンタリングですから どちらの場合も、単純な解決策として スタイルに"width: 100%"等を入れて横幅を明確にすればOKです。 原因については一時的にスタイルに"background-color: #RRGGBB"や "border: solid 1px #RRBBGG"等を入れてやれば良いでしょう。 きちんと対処されたいならインライン要素・ブロック要素について 調べてみてください。
その他の回答 (5)
- mahny
- ベストアンサー率74% (57/77)
> インライン要素にはtext-align:centerは"width: 100%" > を入れないと有効にならないということでしょうか？？ 実機にてタグの描画領域を調べてeefedorさんの様な結論に至りました。 重ねて書きますが、ちゃんと対処したいならインライン・ブロック要素を調べてください。 時間掛けて覚えるべきかこの場を凌げばいいだけなのかeefedorさんが判断してください。 それにしても回答と補足が追加されるほど、結局何が目的なのかが分からなくなりそうです。 「コピーライトをブラウザ下部にセンタリング表示したい」だけじゃないのでしょうか？ そういう意味では、#5のコードも私には目的達成しているように見えますが、 回答にある手法やコードを実際に動かして確認していらっしゃいますか？ ちなみに自分のはたかだか20分くらいで書いた邪道技なので、HTMLやCSSの仕様は気にしていません。 手元にあったIEで試したら出来たってだけの「簡単な解決策」→「邪道技」です。 # 動かないって言われるのも気分が悪いので先日回答前に書いたコードを出しておきます。 # （インラインがBODY直下ダメですよとかは言いっこなしです） OS:WinXP SP2 ブラウザ:IE7.0 ---------- <html> <head></head> <body> <span style="position: absolute; bottom: 1px; width: 100%; border: solid 1px #ff0000; text-align: center;"> span:あいうえお </span> <div style="position: absolute; bottom: 21px; width: 100%; border: solid 1px #0000ff; text-align: center;"> div:かきくけこ </div> </body> </html> ---------- 長文ごめんなさい。私はこれで消えます。
お礼
回答ありがとうございます。 すいません、自分で試行錯誤しながらで混乱してるので あいまいなことをしてしまいご迷惑をお掛けします。 インライン・ブロック要素も現在改めて勉強し直しています。 大変参考になりました。 どうもありがとうございました。
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
position:abusolute;を使うと領域が幅を持たなくなるのでセンタリングできません。 幅を指定する必要があります。…が、width:100%を指定してもIEが正しく表示できない。 Strictにしてもなんか上手くいかないです。ダミーで空白領域を埋める方法はありますが。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;Charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>てすと</title> <style type="text/css"> <!-- .test1 { position:absolute; width:100%; height:20px; background:#FF0000; bottom:0px; left:0px; color:#FFFFFF; margin:0px; text-align:center; } --> </style> </head> <body> <p class="test1">test</p> </body> </html>
お礼
>position:abusolute;を使うと領域が幅を持たなくなるのでセンタリングできません。 回答ありがとうございます。 なるほど、何冊かの本を読んでこの方法はいけるのでは？と思い、 試してみたんですがダメだったようですね、、、 う～ん奥が深い、、、 どうもありがとうございました。
- himajin100000
- ベストアンサー率54% (1660/3060)
よくわかるテストケース。自分で作って実験してみよう！ http://oshiete1.goo.ne.jp/qa3048381.html #Q3048381への回答は思いついてないけど。(Transitional DTDを使うってのは勧めたくない。個人的に) CSS2仕様書より Appendix A. A sample style sheet for HTML 4.0 http://www.w3.org/TR/REC-CSS2/sample.html >スタイルに"width: 100%"等を入れて横幅を明確にすればOKです。 http://www.w3.org/TR/REC-CSS2/propidx.html width,height >all elements 【but non-replaced inline elements, table rows, and row groups】 なのでspan要素がdisplay:inlineのときwidthプロパティ,heightプロパティは無効です。書き忘れかな？
補足
回答ありがとうございます。 display:inline←このタグというのはインライン要素と定義する ということですよね？？ ちなみにdisplay:blockはブロックライン要素と定義すると理解 しています。 これら二つは辞書には載ってないんですが雑誌（ＭＤＮ）だと 当たり前のように使われているので何なのかと思っていました、、、 もしよろしければ答えて頂ければ幸いです。
><span>タグだと"text-align:center"は使えないということでしょうか？？ 使えない (他の解答と同じ)
お礼
回答ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
spanはインライン要素ですから幅をもっていませんので、 センタリングという概念があてはまりません。
お礼
回答ありがとうございます。 そうすると上下に幅が空いてしまいますがdivタグにするしかないよう ですね。 どうもありがとうございました。
補足
回答ありがとうございます。 すいません本何冊か読んで初めて手書きをしてるので、 ちょっと苦戦してます、、、 インライン要素は幅を持たないからセンタリングされないという ことで、インライン要素にはtext-align:centerは"width: 100%" を入れないと有効にならないということでしょうか？？ もしよろしければ答えて頂ければ幸いです。