【CSS】margin-left:autoで右寄せにする

「margin-left:autoで右寄せにできる」ということについて深堀りしていきます。

【基本】ブロック要素とtableはmargin-left:autoで右寄せできる

下記はいろんな要素に「margin-left: auto」を指定した例です。

divとtableは右寄せになり、img、span、inline-blockは右寄せになりません。

<style>
.example{
    border: 1px solid #999;
    background: #b5c7f7;
}
.example>*{
    /*コレ*/margin-left: auto;
    margin-top: 5px;
    border: 1px solid #999;
    width: 100px;
    background: #FFF;
}
</style>
<div class="example">
    <div>div</div>
    <table><tr><td>table</td></tr></table>
    <img width="200" src="cat.jpg" alt=""><br>
    <span style="display: inline-block">inline-block</span><br>
    <span>span</span>
</div>

marginにおけるautoはその値が最大になるように自動で設定されます。

左と右両方がautoだと、左右の空間を最大にしつつ均等に割り振られるため、左右から押し込まれつつ結果的に中央寄せになります。

左だけautoだと左側の空間が最大になります。これにより要素は右側に押し込まれ結果的に右寄せとなります。

これが「margin-left: auto」で右寄せになる原理です。

ブロック要素とtableを右寄せしたいときは、その要素自身に「margin-left:auto」を指定しましょう。

インライン要素、display: inline-blockを右寄せしたいときは、その親要素に「text-align: right」を指定しましょう。

margin-rightも指定可能

「margin-left: auto」が指定されている要素に、auto以外の「margin-right」を指定すると、右寄せした上で「margin-right」の値だけ左に寄ります。

下記は「margin-left: auto」と「margin-right: 100px」を指定した例です。

<style>
.example2{
    border: 1px solid #999;
    background: #b5c7f7;
}
.example2>div{
    /*コレ*/margin-left: auto;
    /*コレ*/margin-right: 100px;
    width: 100px;
    border: 1px solid #999;
    background: #FFF;
    padding: 5px 10px;
}
</style>
<div class="example2">
    <div>div</div>
</div>

【応用】横並べして右寄せする

下記はdisplay: flexで横並べした例です。この子要素の2番目に「margin-left: auto」を指定すると2番目以降が右寄せになります。

<style>
.example3{
    display: flex;
    border: 1px solid #999;
    background: #b5c7f7;
    padding: 5px;
}
.example3>div{
    border: 1px solid #999;
    background: #FFF;
    margin: 5px;
    padding: 5px 10px;
}
.example3>div:nth-child(2){
    /*コレ*/margin-left: auto;
}
</style>
<div class="example3">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</div>

float:rightでこの形にしようとするとdiv2とdiv3が入れ替わってしまいますが、上記の方法であれば順番どおりです。

【まとめ】margin-left:autoで右寄せ

ブロック要素とtableは「margin-left:auto」で右寄せでき、インライン要素とdisplay:inline-blockはできない。

auto以外の「margin-right」を指定すると、右寄せした上でその値だけ左に寄る。

display: flexで横並べした子要素に「margin-left: auto」を指定するとその要素以降が右寄せになる。

以上、margin-left:autoで右寄せを解説しました。