wolf

【CSS】センタリングが効かない‥解決。「中央寄せ」についてのまとめ

投稿日: カテゴリー
一から自分で作成したものではなくてテンプレとして配布されているものをカスタマイズとして弄っている状況、どこの部分の、どの設定が、どう邪魔をして中央寄せが出来ないのか・・とりあえずは一通りCSSのチェックはしたものの全然見つからず・・そろそろ面倒になってきてイライラ・・
●text-align: center;
まず誰もが最初に思いつくのはこれじゃないでしょうか。
display: inline; 及び display: inline-block;
でも効かず・・。
●margin: 0 auto;
ちゃんとwidthを(100%を避けて)設定しても、効かない・・。
「inline要素」には「text-align: center;」、「block要素」なら(width設定で)「margin:0 auto;」じゃなかったっけ・・(´ヘ;)ムー…
●display: table-cell;
「height、vertical-alignの指定が必要」
なるほどコレだったか・・(やってなかったっけ?)と思ったけど、案の定、何故か効かず・・。

ここで出会ったのが「display:flex」です。

これほどまでに苦労していたセンタリング、中央寄せが、すんなり出来てしまいました。
詳しくはこちらへ。
http://degitekunote.com/blog/2014/12/05/css3-display-flex/
感謝です! (*´∪
*)
(結局、何が原因だったのかは放置のままというのは大問題ながら・・メンドクサイ・・)
(その他、参考)
●position: absolute;
「top: 0;」、「bottom: 0;」、「margin: auto;」、
中央寄せしたい要素を内包するブロック要素に「position: relative;」もしくは「position: absolute;」を指定、だそうです。

(自分は試してません。個人的にpositionはその管理が結構面倒に感じているので、どうしても、という場合にのみ”画像”で使用しています)

関連記事:

Facebook にシェア
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です