• ベストアンサー

text-alignについての疑問

スタイルシートに {text-align:center;position:absolute;bottom:50px;} と入れて、一番下にあるCopyright&copy;○○という位置を固定して、真ん中にしたいんですが そうなりません。 position:absoluteを使ったときはセンタリングできないのでしょうか？？ また、この場合はどうやればいいのでしょうか？？ もう一つ質問させて頂きます。 <span style="text-align:center">aaaaaaaaaaaa aaaaaaaa</span> とやってもセンタリングできません。 <span>を<div>に変えると真ん中に来ます。 <span>タグだと"text-align:center"は使えないということでしょうか？？ 一つでもいいのでわかる方いらっしゃいましたらよろしくお願い致します。

  • HTML
  • 回答数6
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • mahny
  • ベストアンサー率74% (57/77)
回答No.1

描画領域に対するセンタリングですから どちらの場合も、単純な解決策として スタイルに"width: 100%"等を入れて横幅を明確にすればOKです。 原因については一時的にスタイルに"background-color: #RRGGBB"や "border: solid 1px #RRBBGG"等を入れてやれば良いでしょう。 きちんと対処されたいならインライン要素・ブロック要素について 調べてみてください。

参考URL：
http://members.jcom.home.ne.jp/pctips/www/bandi.html
eefedor
質問者

補足

回答ありがとうございます。 すいません本何冊か読んで初めて手書きをしてるので、 ちょっと苦戦してます、、、 インライン要素は幅を持たないからセンタリングされないという ことで、インライン要素にはtext-align:centerは"width: 100%" を入れないと有効にならないということでしょうか？？ もしよろしければ答えて頂ければ幸いです。

その他の回答 (5)

  • mahny
  • ベストアンサー率74% (57/77)
回答No.6

> インライン要素には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> ---------- 長文ごめんなさい。私はこれで消えます。

eefedor
質問者

お礼

回答ありがとうございます。 すいません、自分で試行錯誤しながらで混乱してるので あいまいなことをしてしまいご迷惑をお掛けします。 インライン・ブロック要素も現在改めて勉強し直しています。 大変参考になりました。 どうもありがとうございました。

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.5

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>

eefedor
質問者

お礼

>position:abusolute;を使うと領域が幅を持たなくなるのでセンタリングできません。 回答ありがとうございます。 なるほど、何冊かの本を読んでこの方法はいけるのでは？と思い、 試してみたんですがダメだったようですね、、、 う～ん奥が深い、、、 どうもありがとうございました。

回答No.4

よくわかるテストケース。自分で作って実験してみよう！ 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プロパティは無効です。書き忘れかな？

eefedor
質問者

補足

回答ありがとうございます。 display:inline←このタグというのはインライン要素と定義する ということですよね？？ ちなみにdisplay:blockはブロックライン要素と定義すると理解 しています。 これら二つは辞書には載ってないんですが雑誌（ＭＤＮ）だと 当たり前のように使われているので何なのかと思っていました、、、 もしよろしければ答えて頂ければ幸いです。

noname#39970
noname#39970
回答No.3

><span>タグだと"text-align:center"は使えないということでしょうか？？ 使えない　(他の解答と同じ)

eefedor
質問者

お礼

回答ありがとうございました。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

spanはインライン要素ですから幅をもっていませんので、 センタリングという概念があてはまりません。

eefedor
質問者

お礼

回答ありがとうございます。 そうすると上下に幅が空いてしまいますがdivタグにするしかないよう ですね。 どうもありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • text-alignの解除の方法

    text-alignの解除の方法ってありませんか？ 例えばhtml内に以下のタグがあるとして、 <div style="text-align:center;"> <div style="width:100px; height:120px; background-image:url(○○○.jpg)"> <div style="width 50px; height: 60px;　position:absolute; margin-top: 20px; margin-left:5px"> <p>あいうえおあいうえお</p> </div> </div> </div> このような場合に<div style="width:100px; height:120px; background-image:url(○○○.jpg)">から、対応している</div>のtext-alignを解除する方法ってありませんか？ IEの標準には対応するのですが、互換だとブロック要素までもがセンタリングされてしまうため困っています。 分かりづらくて申し訳ありません。

  • 段落内の "text-align" の重複

    CSSについての質問です。 <p>タグの段落内で "text-align" を使用して、 文字を寄せる記述をしているのですが、 「中央揃え」と「右寄せ」が重なってしまい、うまく表示されません。 分かりにくい説明だと思いますので、ソース例を書きます。 --------------------------------------------------------- <p style="text-align: center;">文字を中央に <span style="text-align: right;">こちらは右寄せ</span></p> --------------------------------------------------------- 上記のように記述しています。 つまり、段落内は基本的に中央揃えなのだが、 一部は右寄せにする…のようなことが、 CSSで実現できるのでしょうか。 どなたかご回答をよろしくお願いします。

    • ベストアンサー
    • CSS
  • タイプライタ風の文字を真ん中にもってきたい

    タイプライタ風の文章をセンターにもってきたいのですが、 どうしても左によってしまいます。 ブラウザの大きさを変えても常に真ん中に もってくる方法はありますでしょうか。 失敗例としては、 <DIV id="type" style="text-align:center; position:absolute; このようにtext-align:center; を入れても タイプライター風な出方がくずれてダメでした。 どうぞよろしくお願いいたします。

  • cssで枠内の文字をセンタリングさせたい

    cssで枠内の文字をセンタリングさせたい ｜￣￣￣￣￣￣￣｜ ｜　　　　　　〇〇家｜ 　￣￣￣￣￣￣￣ <body> ${afBlock('_emailer')}$ <!--block "_list.header" --> <!--block "_list.main.pageHeader" --> <div class="frame"> <div class="host cell">${host}$<span class="host_suffix">家</span></div> でセンタリングさせたいのは${host}$の部分にでる文字だけ（図でいう〇〇）です （単に text-align: center;を使用すると「家」の部分も含まれてセンタリングされてしまうので・・・ ちなみにセンタリングの幅は左枠線～「家」の前です（用は｜←この範囲→家｜） Cssはこうなってます div.frame div { position: absolute; } div.cell { border: 1px solid black; } div.host { left:0; top:5mm; width: 36mm; height: 9mm; text-align: right; vertical-align: bottom; padding-top:11mm; font-size:7mm; } span.host_suffix { font-size:5mm; }

    • ベストアンサー
    • CSS
  • align="middle"が無視される　TOPに

    <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title lang="ja">文書タイトル</title> </head> <body> <div style="text-align:center;" style="font-size:400%;"> <IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle"> test <IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle"> </div> </body> </html> これをブラウザで表示すると、align="middle"とやってるのに、画像のように文字がTOPの位置に表示されてしまいます。 <div style="text-align:center;" style="font-size:400%;"> がなければ、文字は画像のど真ん中に表示されるのですが、 font-size:400%;はまだしも、画像もブラウザの真ん中に表示させたいので <div style="text-align:center;"で画像と文字を挟みたいです。 どうすれば、画像＆文字をブラウザの真ん中に表示させつつ、文字を画像の真ん中に表示できるのでしょうか？

    • ベストアンサー
    • HTML
  • PHPで携帯サイト　<div text-align:center>が適用されない

    PHPで携帯サイトを作っているのですが 部分的にテキストをセンタリングや背景色を設定したいのです。 機種はFOMA 700iです。通常は<div text-align:center>が適用されないのですが、 他のページでセンタリングされているのを見ます。 何か工夫されていると思いますが どなたか裏技的な事ご存知でしたら教えて頂けますか？

    • 締切済み
    • PHP
  • Firefoxだと無効なのかなあ…

    自分で作ったページなんですが、スタイルシートで、 div{text-align:center;} と指定してからdivタグでセンタリングしたいところをはさんでいます。 IEで見てみると文章も画像もテーブルもきれいに全部センタリングされてるのですが、Firefoxで見てみるとテーブルだけ左に寄ってしまいます。 やっぱりきちんと <table align="center"> って指定しておかないとだめでしょうか？

  • タグの組合せ方について

    　ホームページ作成ソフトを使ってはいませんが、メモ帳に直接HTMLを入力してページを作ろうとしています。初心者です。 　今回は発光させた文字をセンタリングする方法について教えてください。文字を発光させるには<div style="font-size:24pt; color:orange; position:absolute; filter:Glow(color=aqua, strength=8)"> ここに発光色を付けたい文字 </div>みたいな感じで入力します。また、文字をセンタリングするには<div align="center">センタリングする文字</div>と入力します。 　この２つを組合せ、発光した文字をセンタリングするにはどう記述すればよいですか？

  • IE８ではtext-align: center;でdivタグが中央にならない。改善策は？

    IE８ではtext-align: center;でdivタグ又はbodyが中央にならなくなってしまったので、修正方法を探していたところ、以下の質問・回答履歴を見つけました。 http://oshiete1.watch.impress.co.jp/qa4989799.html 上記の回答履歴では最終的にNo.6さんの以下の回答で問題が解決されています。 CSSでは以下のように記述： div.center { width: 80%; margin-right: auto; margin-left: auto; } HTMLではセンタリングさせたいdiv要素を以下のように記述： <div class="center">文章等<div> ＜質問1＞ ここで私の質問ですが、なぜ上記の回答では<div class="center">文章等<div> を中央に表示するためにCSSにwidth: 80%;が必要なのでしょうか（width: 80%はdivタグのセンタリングには特に必要ないのですか？なぜ、width: 80%が記述されているのか分かりません。）？この80%という値はどこから導き出されたのでしょうか（なぜ、例えば60%、70%等ではだめなのですか？）？ また、bodyタグをセンタリングしたい場合は、どうですか？CSSにwidth: 80%;が必要なのでしょうか？ ＜質問２＞ 「margin-right: auto;とmargin-left: auto;」以外にもmargin:0 autoという方法が他のサイトで紹介されていましたが、「margin-right: auto;とmargin-left: auto;」を使用した場合とmargin:0 autoを使用した場合の表示結果は全く同じなのでしょうか？margin:0 autoの場合、上下のマージンも0（無し）となるので、その点で上下のマージンを指定していない「margin-right: auto;とmargin-left: auto;」と異なるように思いますが？「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoを使用する場合、他方を使用することに比べてメリット及びデメリットはあるのでしょうか？ また、もしも、「margin-right: auto;とmargin-left: auto;」の代わりにmargin:0 autoを使用する場合、記述は以下で正しいのでしょうか？ ＜divタグをセンタリングしたい場合＞ CSSでは以下のように記述： div.center { width: 80%; margin:0 auto } 上記の記述で div.center { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか？ ＜bodyタグをセンタリングしたい場合＞ CSSでは以下のように記述： body { width: 80%; margin:0 auto } 上記の記述で body { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか？ ＜質問3＞ IE6又はそれ以前のIEは、「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoではDivタグをセンタリングできず、text-align: center;を使用する必要あったような記憶があります。IE7/8に加えてIE6又はそれ以前のIEにおいても<div class="center">文章等<div>をセンタリングしたい場合、どのような記述となりますか？ 以下のように「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoをtext-align: center;と同じ場所に記述する方法はうまくいかないようですが。私の記述方法が悪いだけですか？ { text-align: center; margin-right: auto; margin-left: auto; } 又は { text-align: center; margin:0 auto; } 関連サイト等あれば、そちらも教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSでcopyright(一番下に表示)

    CSSで段組デザインのwebを作っているのですが、ページの一番下にcopyrightを表示するクラスを作ったのですが、うまくいきません。 <div class="menu"> ... </div> <div class="main"> .... </div> ページは↑のような構成になっていて(absoluteで位置指定しています)、 .copy { bottom : 10px ; position : absolute ; } のようなクラスを作ったところ、スクロールが必要なページの場合、ページの途中にコピーライトが書かれてしまいます。つまり、ページの今見えている部分の一番下にかかれてしまいます。 ページ全体の一番下に書かれるようにするにはどうしたらよいでしょうか？

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する