気の赴くままに

仕事や収入は置いといて、信州に住みたいという思いのまま移住してみた人です

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;


というわけですな。



次は上下の中央寄せをブラッシュアップします。
上下の中央寄せ、なんとなく苦手意識がある・・・

では!!