CSSでfloatを使わずに「text-align:justify」で特定のテキストや画像を左端・右端に配置する方法もあった

cssでfloatを使って特定のテキストや画像を左端、右端に配置することってあると思います。例えば「header要素内のサイト名やロゴマークなどは左、ソーシャルボタンは右にそれぞれ配置する」などです。

下のような感じです。

「float」を使って左端・右端に配置

上の方法は私もよく使っているんですが・・・最近、floatを使わずに「text-align:justify」を使って似たようなことができることを知りました。結構前からこのやり方あったみたい。

「text-align:justify」を使って左端・右端に配置

floatを使うと、背景色などを入れたい場合はclearfixなどを使うこともあったんですが、「text-align:justify」を使えばclearfixの処理を加えなくても同様のことができます。

割と古いブラウザ(ie7など)でもうまく表示されているのは嬉しいです。

こんなやり方があるんだなぁ～。

「他にもこんな方法があるよ！」という情報がありましたら、ぜひともご教示くださいますと嬉しいです。