【html/CSS】画像を右寄せ,中央寄せ,左寄せする方法

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

「画像の中央寄せができないんだけど!?」

CSSで画像を右寄せ,中央寄せ,左寄せする方法とそれができないときの注意点を解説します。

【基本】親にtext-align

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

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

【右寄せ】text-align:right

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

【中央寄せ】text-align:center

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

【左寄せ】text-align:left

<style>
.example3{
    /*コレ*/text-align: left;
    border: 1px solid #333;
}
</style>
    
<div class="example3">
    <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-left:auto

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

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

【中央寄せ】margin:auto

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

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

【左寄せ】margin-right:auto

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

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

できないときの注意点

text-alignは親に指定しているか

text-alignは子要素を位置調整するCSSです。img自身に指定しても効きません。

imgの親要素に指定しましょう。

親の幅は画像より大きいか

親の幅と画像の幅が同じでは寄る場所がありません。

空白があるように見えてもそれがpaddingである場合もあります。

確認しましょう。

画像にdisplay:blockを指定していないか

text-alignはインライン要素を位置調整するCSSです。ブロック要素は位置調整できません。

先述したようにimgにdisplay:blockを指定した場合は画像自身にmargin:autoを指定しましょう。

その他　ケアレスミス

スペルミスやCSSの優先順位のミスをしている可能性もあります。

下記記事を参考に見直してみてください。

【まとめ】画像を右寄せ,中央寄せ,左寄せする方法

インライン要素なら親にtext-align

• 【右寄せ】text-align:right
• 【中央寄せ】text-align:center
• 【左寄せ】text-align:left

ブロック要素なら画像にmargin:auto

• 【右寄せ】margin-left:auto
• 【中央寄せ】margin:auto
• 【左寄せ】margin-right:auto

以上、画像を右寄せ,中央寄せ,左寄せする方法でした。