【CSS】要素を右寄せにする場合は「margin-right:0」

スポンサーリンク

CSS で要素を右寄せにしたい場合は「margin-left: auto」、 「margin-right: 0」と指定すると右寄せになります。

中央に配置する場合は、「margin-left: auto」、「margin-right: auto」とします。

デフォルトは左寄せですので、何も指定しない場合は左寄せとなります。

下で div 要素を使って具体的に見ていきます。

右寄せ・中央寄せのサンプルコード

div 要素が2つあり、それぞれの幅を 150pxに指定し、見やすいように枠線を表示します。

上の div 要素が右寄せで、下の div 要素が中央寄せです。

右寄せ
中央

<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>

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト