ここから本文です

floatしたものを中央に寄せたい!

wom********さん

2014/1/3011:48:52

floatしたものを中央に寄せたい!

----------------------------
■HTML

<div class="submit">
<p>[mwform_backButton]</p>
<p>[mwform_submitButton]</p>
</div><!--.submit-->
</div><!--.contact-form-->

■CSS

.submit p{
float:left;
}

----------------------------

表題の通りなのですが、floatしたものを中央に寄せたいのですが、
どうしても左側で固定されてしまます。

text-align:centerをしても画面左に寄ったままです。
中央に寄せるにはどうしたらいいのでしょうか。

閲覧数:
71,438
回答数:
2

違反報告

ベストアンサーに選ばれた回答

ven********さん

編集あり2014/1/3014:42:12

こんにちは♪

「float:left」 という指定は、
「文章の左に回り込ませる」という意味なので、
とうぜん積み重なるように左に寄りますo(・ω・*

要素を横並びにするとき、
「float」を使う以外にも、
もう少し便利な方法があるので、
「float」を使う方法と、もう一つの方法を、
順に解説してみますね*゜▽^)


-*-*-*◆ 「float: left」の中央揃え ◆*-*-*-

「float:left」を指定して横に並べた要素を
ページの中央に揃えるには、
横幅を指定した <div> などのブロック要素にいれて、
その <div> を中央寄せすることになります。
<div> を中央揃えするには、
横幅を指定し、左右のマージンを「auto」にします。
┌────────
| ■HTML
| <div class="submit">
| <p>[mwform_backButton]</p>
| <p>[mwform_submitButton]</p>
| </div><!--.submit-->

| ■CSS
| .submit{
| width: ( <p>の横幅合計 ) px;
| margin: 0px auto; /*上下 左右*/
| }
| .submit p{
| width: ( 横幅を指定 )px;
| float: left;
| }
└────────
このとき、
<div> の横幅は、
「float:left」を指定した要素すべての横幅
(マージン、パッディング、枠線幅を含む)
とピッタリ同じにしないと、中央に揃いません。
1 px でも大きければ、
余った横幅の分だけ左に寄ってしまうし、
1 px でも小さければ、
横幅に入りきらなかった float 要素が
強制的に改行されて1行下に回されてしまいます。

なので、
横に並べる要素の幅や個数が不確定の場合は、
「float:left」で横並びにしたものを
中央寄せすることが出来ません。


-*-*-*◆ インラインブロック ◆*-*-*-

要素を横並びにして中央揃えするとき、
「display:inline-block」を指定すると
便利な場合があります。
インラインブロックの指定をすると、
横幅、高さをもつブロック要素でありながら、
テキストなどのように改行しない限り横に並ぶ
インライン要素としての性質を持たせることが出来ます。

インラインブロックは、
テキストと同じように扱えるので、
「text-align:center」で中央揃えをしたり、
「white-space:nowrap」で
ページ幅による自動改行を禁止したりできます。

ただし、
「float:left」の場合と違って、
ソースコード上の要素と要素の間で改行してしまうと、
そこにわずかな隙間が出来てしまいます。
なので、
要素の間に隙間を作りたくない場合は、
コメントアウト「<!-- -->」をつかって
┌────────
| <p>~</p><!--
| --><p>~</p>
└────────
のようにソース上の改行を無効化するか、
要素の間で改行しないように
┌────────
| <p>~
| </p><p>~
| </p>
└────────
のような段違いの記述をする必要があります。
わずかな隙間を気にしない場合には、
これらのような書き方は必要ありません♪

┌────────
| ■HTML
| <div class="submit">
| <p>[mwform_backButton]</p>
| <p>[mwform_submitButton]</p>
| </div><!--.submit-->

| ■CSS
| .submit{
| text-align: center;
| white-space: nowrap;
| }
| .submit p{
| display: inline-block;
| }
└────────

この方法だと、
「float」を使うときのように、
親要素 <div> の横幅をまったく気にしなくていいので、
横並び <p> のサイズが変わろうと、個数が増えようと、
関係なく横並びで中央に揃えることが出来ますd(゜▽^*

ベストアンサー以外の回答

1〜1件/1件中

dob********さん

編集あり2014/1/3105:26:26

htmlを書き換えるのはアリですか?

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる