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

CSSについて教えて下さい。
以下のサイトを参考に3つのボックスを横並びに作成したのですが、3ボックスの配置を中央揃えに出来ません。
http://deaimobi.com/css-grid-yokonarabi/
アドバイスいただけませんでしょうか。

1454759782
●拡大する

●質問者: kaji0245
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● pogpi
●50ポイント

三つのボックスをDIVタグでくくって、cssで

div.hoge{float:left;text-align:center;width:100%}

で、どうですか。


2 ● rouge_2008
●50ポイント

「justify-content」プロパティで要素の位置を指定できます。
次の1行を親要素に指定してみてください。

 justify-content: center;

※質問の参考ページにあわせる場合は「boxWrap」クラスに指定します。

・これからのCSSレイアウトはFlexboxで決まり!
http://www.webcreatorbox.com/tech/flexbox/
※「要素のスペースを自在に操ろう」の「中央揃え」参照


【※ 追記 ※】

次の記事にも「justify-content」プロパティなどFlexboxについての説明があります。
各プロパティについて画像つきで説明されているので分かりやすいと思います。

・CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

関連質問

●質問をもっと探す●



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