HTMLで左寄せや右寄せを行う方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLで左寄せや右寄せを行う方法について、対象が文字列の場合とブロックの場合に分け、簡単に解説していきます。

対象が文字列の場合

スタイルのtext-alignプロパティで文字列の左寄せや右寄せが可能です。

text-alignプロパティの値はleftにすると左寄せ、rightにすると右寄せにできます。

<div style="width:100%;text-align:left;">左寄せ</div>
<div style="width:100%;text-align:right;">右寄せ</div>

上記のコードでは、text-alignプロパティを使って、二つのdiv要素内の文字列を、それぞれ左寄せと右寄せにさせています。

対象がブロックの場合

スタイルのfloatプロパティでブロックごと左寄せや右寄せさせることができます。

floatプロパティの値はleftで左寄せ、rightで右寄せですが、右寄せでは後続要素のclearプロパティでrightと指定します。

<div style="float:left;">左寄せ</div>
<div style="float:right;">右寄せ</div>
<div style="clear:right;">後続の要素</div>

上記のコードでは、floatプロパティを使って、div要素二つを左寄せと右寄せさせて、後続の要素で右寄せを解除させています。

ブロックの左寄せと中央寄せと右寄せを同時に行う場合

スタイルのdisplayプロパティの値をflexにすると、ブロックの左寄せと中央寄せ、右寄せが同時にできます。

また、displayプロパティの値でのflexの指定に加え、justify-contentプロパティの値をspace-betweenにする必要があります。

<div style="display:flex;justify-content:space-between;">
    <div>左寄せ</div>
    <div>中央寄せ</div>
    <div>右寄せ</div>
</div>

上記のコードでは、div要素三つを、一つのdiv要素の親要素に入れることで、それぞれ左寄せと中央寄せ、右寄せさせています。