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>

HTML・CSS入門