CSS: 要素を右寄せにする場合は「margin-right:0」
CSS で要素を右寄せにしたい場合は「margin-left: auto」、 「margin-right: 0」と指定すると右寄せになります。
中央に配置する場合は、「margin-left: auto」、「margin-right: auto」とします。
デフォルトは左寄せなので、何も指定しない場合は左寄せとなります。
下で div 要素を使って具体的に見ていきます。
右寄せ・中央寄せのサンプルコード
div 要素が2つあり、それぞれの幅を 150pxに指定し、見やすいように枠線を表示します。
上の div要素(#sample1)が右寄せで、下の div要素(#sample2)が中央寄せです。
右寄せ
中央
<div id="sample1" class="s">右寄せ</div>
<div id="sample2" class="s">中央</div>
<style>
div.s {
width: 150px;
border: 1px solid silver;
}
/* 右寄せ */
#sample1 {
margin-left: auto;
margin-right: 0;
}
/* 中央 */
#sample2 {
margin-left: auto;
margin-right: auto;
}
</style>