CSSでdiv,文字,画像を右下寄せする方法3選

「画像を右下に寄せるにはどうするの!?」

CSSでdivや文字、画像を右下寄せする方法を3つ紹介します。

display:flexで右下寄せ

display:flexは子要素の位置調整をするCSSです。

justify-contentは横方向、align-itemsは縦方向の位置調整をします。

「justify-content: flex-end」で右寄せ、「align-items: flex-end」で下寄せとなり、両方指定することで右下寄せになります。

<style>
.example{
    /*コレ*/display: flex;
    /*コレ*/justify-content: flex-end;
    /*コレ*/align-items: flex-end;
    height: 100px;
    border: 1px solid #333;
    background: #ddedfa;
}
.example>div{
    border: 1px solid #333;
    background: #fff;
}
</style>
<div class="example">
    <div>右下に寄せる</div>
</div>

右下から少し離したいときは、親要素にpaddingまたは子要素にmarginを指定しましょう。

<div class="example">
    <div style="margin: 0 10px 20px 0">右下に寄せる</div>
</div>

position:absoluteで右下寄せ

position:absoluteは要素を任意の位置に設置するCSSです。

親要素にposition: relative、自身にposition: absoluteを指定します。

「right: 0」で右寄せ「bottom: 0」で下寄せとなり、両方を指定することで右下寄せとなります。

<style>
.example2{
    /*コレ*/position: relative;
    height: 100px;
    border: 1px solid #333;
    background: #ddedfa;
}
.example2>div{
    /*コレ*/position: absolute;
    /*コレ*/right: 0;
    /*コレ*/bottom: 0;
    border: 1px solid #333;
    background: #fff;
}
</style>
<div class="example2">
    <div>右下に寄せる</div>
</div>

右下から少し離したいときは、rightとbottomの値を変更するか子要素にmarginを指定しましょう。

<div class="example2">
    <div style="margin: 0 10px 20px 0">右下に寄せる</div>
</div>

ここではposition:absoluteで解説していますが、position:fixedにすることで画面の右下寄せにすることもできます。

background-positionで右下寄せ

画像限定ですが、backgroundの位置を右下にすることもできます。

background-positionを指定するとき「right bottom」と指定すると右下寄せになります。

<style>
.example3{
    height: 100px;
    border: 1px solid #333;
    /*コレ*/background: #ddedfa url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat right bottom / 100px auto;
}
</style>
<div class="example3"></div>

右下から少し離したいときは「right 20px bottom 10px」のように値を指定しましょう。

<style>
.example4{
    height: 100px;
    border: 1px solid #333;
    background: #ddedfa url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat right 20px bottom 10px / 100px auto;
}
</style>
<div class="example4"></div>

【まとめ】右下寄せする方法

display:flexを使う方法は親要素に

display: flex;
justify-content: flex-end;
align-items: flex-end;

positionを使う方法は自身に

position: absolute;
right: 0;
bottom: 0;

背景画像を使う方法は自身に

background-position:right bottom

以上、CSSで右下寄せする方法でした。