【CSS/html】画像の位置を調整する方法

「画像をもう少しだけ右に移動させたい！」

「画像を中央寄せにしたい！」

画像の位置を調整する方法をケースにわけて紹介します。

関連記事も参考にしてください。

【結論】画像の位置を調整する方法

微調整するとき

• 画像にmarginで隣の画像との隙間を調整
• 親にpaddingでワクとの隙間を調整

画像がインライン要素のとき

• 【中央寄せ】親にtext-align: center
• 【右寄せ】親にtext-align: right

画像にdisplay:blockを指定しているとき

• 【中央寄せ】画像にmargin:auto
• 【右寄せ】画像にmargin-left:auto

縦にも横にも寄せる、インライン・ブロック要素関係なく位置調整したいとき

親にdisplay:flexと下記をセットで指定

• 【左右中央寄せ】justify-content: center
• 【右寄せ】justify-content: flex-end
• 【上下中央寄せ】align-items: center
• 【下寄せ】align-items: flex-end

画像を他の要素に重ねつつ任意の位置に調整したいとき

position:absolute

以下より詳しく解説します。

【ベース】位置を調整する画像

下記のような画像があるとします。

画像の外側には線をつけた親要素（div）があります。この親に対して画像を位置調整していきます。

<style>
.example{
    border: 1px solid #333;
}
</style>
    
<div class="example">
    <img src="cat.jpg" width="200" alt="">
</div>

【微調整】画像にmargin

marginは要素の外側に空白を作るCSSです。

画像の位置を調整する基本はmarginです。

下記は上と左にmarginを指定した例です。

<style>
.example2 img{
    /*コレ*/margin: 20px 0 0 20px;
}
.example2{
    border: 1px solid #333;
}
</style>
    
<div class="example2">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

marginについて詳しくはこちら↓

【下の空白を消すには】画像にdisplay:block

上記の画像の下にはmarginを指定していないのに空白がありますね。

これは画像がインライン要素であるため存在する空白です。

下の空白を消すには画像をブロック要素にしてしまいましょう。

インライン要素とブロック要素について詳しくはこちら↓

ブロック要素にするには画像にdisplay:blockを指定します。

<style>
.example3 img{
    /*コレ*/display: block;
}
.example3{
    border: 1px solid #333;
}
</style>
    
<div class="example3">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

【微調整】親にpadding

paddingは要素の内側に空白を作るCSSです。

画像（img）ではなくその親要素（div）に指定します。

下記は上と左にpaddingを指定した例です。

<style>
.example4{
    /*コレ*/padding: 20px 0 0 20px;
    border: 1px solid #333;
}
</style>
    
<div class="example4">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

marginとpaddingどっちを使えばいいの？

上記の結果を見るとmarginとpadding両方同じ結果になっていますよね？

画像が一つのときはどちらでもOKです。

画像が複数になったとき違いが出てきます。

marginは隣の画像との隙間を調整できます。

<style>
.example5 img{
    margin-right: 20px;
}
.example5{
    border: 1px solid #333;
}
</style>
    
<div class="example5">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

paddingはワクとの隙間を調整できます。

<style>
.example6{
    padding: 30px;
    border: 1px solid #333;
}
</style>
    
<div class="example6">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

もちろんmarginとpadding両方使って隣の画像との隙間を調整しつつワクとの隙間を調整することも可能です。

【左右に寄せる】親にtext-align

画像を中央寄せ、右寄せするには親にtext-alignを指定します。

text-alignはインラインの子要素を位置調整するCSSです。

【中央寄せ】text-align: center

<style>
.example7{
    /*コレ*/text-align: center;
    border: 1px solid #333;
}
</style>
    
<div class="example7">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

【右寄せ】text-align: right

<style>
.example8{
    /*コレ*/text-align: right;
    border: 1px solid #333;
}
</style>
    
<div class="example8">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

【画像がdisplay:blockのとき】margin:auto

先ほど画像にdisplay:blockを指定すると空白を消せると紹介しました。

ただし、画像にdisplay:blockが指定されているとtext-alignでは左右寄せができません。

親ではなく画像にmargin:autoを指定しましょう。

【中央寄せ】margin:auto

左右の空白を均等に最大にすることで画像を中央に寄せる方法です。

<style>
.example9 img{
    display: block;
    /*コレ*/margin: auto;
}
.example9{
    border: 1px solid #333;
}
</style>
    
<div class="example9">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

【右寄せ】margin-left:auto

左の空白を最大にすることで画像を右に押し込む方法です。

<style>
.example10 img{
    display: block;
    /*コレ*/margin-left: auto;
}
.example10{
    border: 1px solid #333;
}
</style>
    
<div class="example10">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

【左右上下に寄せる】親にdisplay:flex

左右寄せだけではなく上下寄せもできるのが「display:flex」です。

display:flexは子要素の位置調整に長けたCSSです。

display:flexなら画像のインライン要素、ブロック要素関係なく可能です。

さらに画像の空白も自動でなくなります。

display:flexは親要素に指定します。

display:flexについて詳しくはこちら↓

【左右寄せ】justify-content

左右寄せするにはdisplay: flexを指定した要素に「justify-content」を指定します。

justify-contentはdisplay: flexとセットで使い、横方向の位置調整をするCSSです。

【左右中央寄せ】justify-content: center

<style>
.example11{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    border: 1px solid #333;
}
</style>
    
<div class="example11">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

【右寄せ】justify-content: flex-end

justify-content:rightではないので気を付けましょう。

<style>
.example12{
    /*コレ*/display: flex;
    /*コレ*/justify-content: flex-end;
    border: 1px solid #333;
}
</style>
    
<div class="example12">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

【上下寄せ】align-items

上下寄せするにはdisplay: flexを指定した要素に「align-items」を指定します。

align-itemsはdisplay: flexとセットで使い、縦方向の位置調整をするCSSです。

【上下中央寄せ】align-items: center

<style>
.example13{
    /*コレ*/display: flex;
    /*コレ*/align-items: center;
    height: 200px;
    border: 1px solid #333;
}
</style>
    
<div class="example13">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

【下寄せ】align-items: flex-end

<style>
.example14{
    /*コレ*/display: flex;
    /*コレ*/align-items: flex-end;
    height: 200px;
    border: 1px solid #333;
}
</style>
    
<div class="example14">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

【任意の位置】画像にposition

画像を他の要素に重ねつつ任意の位置に調整したいときはpositionを使います。

<style>
.example15{
    position: relative;
    border: 1px solid #333;
}
.example16{
    position: absolute;
    top: 30px;
    left: 20px;
}
</style>
    
<div class="example15">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" width="400">
    <img class="example16" src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="">
</div>

親要素にposition: relativeを指定します。

画像にposition: absoluteを指定します。

あわせてtop,left（またはbottom,right）で任意の位置に調整します。

positionについて詳しくはこちら↓

【まとめ】画像の位置を調整する方法

微調整するとき

• 画像にmarginで隣の画像との隙間を調整
• 親にpaddingでワクとの隙間を調整

画像がインライン要素のとき

• 【中央寄せ】親にtext-align: center
• 【右寄せ】親にtext-align: right

画像にdisplay:blockを指定しているとき

• 【中央寄せ】画像にmargin:auto
• 【右寄せ】画像にmargin-left:auto

縦にも横にも寄せる、インライン・ブロック要素関係なく位置調整したいとき

親にdisplay:flexと下記をセットで指定

• 【左右中央寄せ】justify-content: center
• 【右寄せ】justify-content: flex-end
• 【上下中央寄せ】align-items: center
• 【下寄せ】align-items: flex-end

画像を他の要素に重ねつつ任意の位置に調整したいとき

position:absolute

以上、画像の位置を調整する方法でした。