CSSで<div>を、画面のボトムで中央に配置するにはどうしたらよういでしょうか?


右下なら、
<div style="position:absolute; bottom:10px; right:10px;">
といったCSSでできるのですが。

分かる人がいましたら教えてください。
お願いします。

回答の条件
  • 1人2回まで
  • 登録:2006/07/19 15:52:57
  • 終了:2006/07/21 02:33:45

ベストアンサー

id:llusall No.3

llusall回答回数505ベストアンサー獲得回数612006/07/19 16:17:48

ポイント22pt

再回答ですみません。

言葉が足りませんでした。

赤字を追加してください。

<div style="position:absolute; bottom:10px; right:10px;width:100%;text-align:center;">xxxxxxxxxxxx</DIV>

id:hiyarihatto

解決しました。

ありがとうございます。

2006/07/21 02:32:40

その他の回答(3件)

id:llusall No.1

llusall回答回数505ベストアンサー獲得回数612006/07/19 16:03:07

ポイント23pt

こちらはいかがでしょうか?

フッターを画面の下に表示

http://www.stylish-style.com/csstec/ultimate/fix-foot.html

id:hiyarihatto

ありがとうございます。

参考になりました。

2006/07/21 02:20:04
id:komorebi No.2

komorebi回答回数133ベストアンサー獲得回数82006/07/19 16:09:16

ポイント23pt

position: absolute;

「position」は、位置を指定するプロパティで、「absolute」と指定しているので、これは、”絶対位置指定”を宣言しています。

その実際の値に当たるものが、

bottom: 10px; right: 10px;

つまり、下から10px、右から10pxの位置に配置しろ、

という意味になります。


もし、下の中央に配置というのであれば、

bottom: 0;

のみにして、

別途、 text-align: center  と中央寄せ指定記述してあげれば中央にくるんじゃないでしょうか?

最終的には、

style="position: absolute; bottom: 0; text-align: center;"

でよいと思います。

id:hiyarihatto

style="position: absolute; bottom: 0; text-align: center;"

だと、左下にいってしまうみたいですね。

下のllusall さんに書かれていますが、styleのなかにwidth:100%がいるみたいです。

2006/07/21 02:32:37
id:llusall No.3

llusall回答回数505ベストアンサー獲得回数612006/07/19 16:17:48ここでベストアンサー

ポイント22pt

再回答ですみません。

言葉が足りませんでした。

赤字を追加してください。

<div style="position:absolute; bottom:10px; right:10px;width:100%;text-align:center;">xxxxxxxxxxxx</DIV>

id:hiyarihatto

解決しました。

ありがとうございます。

2006/07/21 02:32:40
id:wizemperor No.4

wizemperor回答回数379ベストアンサー獲得回数522006/07/19 16:40:08

ポイント22pt

下記のようにすればよいと思います。

下部への配置は、絶対配置(positon: absolute;)を使わないで配置したほうがよいと思います。

<div style="text-align: center;"> <!-- 親要素(IE対策) -->

<div style="margin: 0 atuo;"> <!-- 元の要素 -->

<!-- ここに中身を書く -->

</div>

</div>


絶対配置(positon: absolute;)を使うなら下記のようにもできます。

ただし、ブラウザによっては上手くいかないかもしれません。未確認です。

<div style="position:absolute; bottom:10px; width:100%; margin: 0 atuo;"> <!-- 元の要素 -->

<!-- ここに中身を書く -->

</div>

id:hiyarihatto

ありがとうございます。

どちらも上手くいきません。

margin: 0 atuo;

辺りが、ソースが怪しい気がします。

2006/07/21 02:33:30
  • id:wizemperor
    すみません、
     margin: 0 atuo;
    は、
     margin: 0 auto;
    のtypo.でした。

    text-align:center; で中央寄せにされるのはIEのバグです。
    IE以外のブラウザでは大概左寄せに表示され、それが正しい表示でもあります。
    下記のように書けば、どのブラウザでも中央寄せになるかと思います(修正)。


    &lt;div style="text-align: center;"&gt; &lt;!-- 親要素(IE対策) --&gt;
    &lt;div style="margin: 0 auto;"&gt; &lt;!-- 元の要素 --&gt;
    &lt;!-- ここに中身を書く -->
    &lt;/div&gt;
    &lt;/div&gt;
  • id:wizemperor
    失敗しました…回答の欄の「atuo」を「auto」へ読み替えていただければと思います。

    divの中身がテキスト等だけならば、llusallさんの回答で問題ないと思います。
  • id:hiyarihatto
    ソース修正してアップして頂き
    ありがとうございますM(_ _)m

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません