一から自分で作成したものではなく、無料配布されているテーマの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はその管理が結構面倒に感じているので、どうしても、という場合にのみ”画像”で使用しています)
コメント