CSSの中央寄せを解除･初期化し左寄せに戻す方法

「パソコン版では中央寄せにしていたけどスマホでは解除して左寄せに戻したい」

CSSの中央寄せを解除･初期化し左寄せに戻す方法を解説します。

【方法1】initialを指定する（IEで効かない）

「initial」はすべてのCSSに指定できる値で、そのCSSを解除・初期値にする値です。

ただし、IEではinitialが効きません。

IEを無視できる場合に利用しましょう。

【方法2】任意で初期値を上書きする

IEも考慮する必要がある場合initialは使えません。

各CSSで左寄せを指定しましょう。

中央寄せといってもいくつかやり方があります。

そのやり方に合わせて左寄せを指定しましょう。

【text-align:centerの場合】
text-align:left

文字を中央寄せするCSS「text-align:center」を指定している場合、「text-align:left」で指定し直すと左寄せになります。

【margin:autoの場合】
margin-left:0

ブロック要素を中央寄せするCSS「margin:auto」を指定している場合、「margin:0」で指定し直すと左寄せになります。

ただし上下にmarginを指定している場合、それも0になりますので「margin-left:0」が無難でしょう。

必要に応じて「margin-right:0」も指定しましょう。

【justify-content:centerの場合】
justify-content:flex-start

flex要素内を中央寄せするCSS「justify-content:center」を指定している場合、「justify-content:flex-start」で指定し直すと左寄せになります。

まとめ

中央寄せを解除･初期化する方法

initialを指定する

IEのためinitialが使えないの場合の左寄せ

• 【text-align:centerの場合】text-align:left
• 【margin:autoの場合】margin-left:0
• 【justify-content:centerの場合】justify-content:flex-start

以上、CSSの中央寄せを解除･初期化し左寄せに戻す方法でした。