text-align: center; と margin: 0 auto;, この際はっきりさせようじゃないの
お久しぶりです。えびこです!
いやー、予想はできていましたが見事に更新が滞りました。笑
Webデザインを勉強していて感じたこと、
自分の中で忘れたくない考え方を無事に書き終え、
完全に安心して落ち着いてしまっていました。
本来このブログを開設した理由が「自分の成長日記を収める為」なので、
自分が学んだ出来事をこれから書き留めていきます。
ですので、Webデザインを勉強していない人からすると
よくわからない記事が増えると思われますが、
ご理解いただければと思います・・・!
さて、今日は調べずに突き進んでいた
text-align: center; と margin: 0 autoの違い
を自分の中ですっきりさせます。
いつもデベロッパツールを見ながら適当にやりくりしていたので、
視覚的にトライアンドエラーで解決するのはこれを機にやめちゃいたいですね〜〜
左右の中央寄せ
text-align: center;
・インライン要素、インラインブロック要素に適用。
・親要素のpaddingが各テキスト、ボタンの中央に合わせて自動調整されるイメージ。
⭐️従って、親要素に設定しなければならない。
margin: 0 auto;
・ブロックの幅を見て、ブロックが中央に来るようにmarginが自動調整されるイメージ。
・widthプロパティの初期値は100%で目一杯なので、widthの指定は必須。
⭐️widthは%で指定することによって、レスポンシブWebデザインに対応可能。
⭐️PCビューの最大幅に上限を持たせる為にmax-widthを合わせて使用することもある。
その他
親要素
text-align: center;
子要素
display: inline-block;
text-align: left;
とする方法もあるみたい。
でもあまり見かけない?ので今回はさらっと。
便利さに気付いたら追記していきます。
つまるところ
インライン要素にはtext-align: center;
ブロック要素にはmargin: 0 auto;
というわけですな。
次は上下の中央寄せをブラッシュアップします。
上下の中央寄せ、なんとなく苦手意識がある・・・
では!!