人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: hiyarihatto
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● llusall
●23ポイント

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

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

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

◎質問者からの返答

ありがとうございます。

参考になりました。


2 ● komorebi
●23ポイント

position: absolute;

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

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

bottom: 10px; right: 10px;

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

という意味になります。


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

bottom: 0;

のみにして、

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

最終的には、

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

でよいと思います。

◎質問者からの返答

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

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

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


3 ● llusall
●22ポイント ベストアンサー

再回答ですみません。

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

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

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

◎質問者からの返答

解決しました。

ありがとうございます。


4 ● wizemperor
●22ポイント

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

下部への配置は、絶対配置(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>

◎質問者からの返答

ありがとうございます。

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

margin: 0 atuo;

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ