画像中央寄せ

2019.12.08

CSS/HTML

お久しぶりです。今回はHTML/CSSにおいて、画像の中央寄せについて書き記していこうと思います。

ご存知の方にはもはや言うまでもない項目は多いですが、自分が初学者の頃、こういった記事にどれくらい助けられたか。。

前置きはこのくらいにして、実務でも使える（であろう！）方法を3つほど紹介します。

HTML

     
 <img src="画像のパス" alt="何らかの画像" class="img">

CSS

     
 .img{
   display: block;
   margin: auto;
 }

img要素はフレージングコンテンツに属し、要素を挿入する目的から、指定が何もされていなければ
display: inline;
が指定されています。

そこでdisplayの指定をblockにし、marginの指定をautoにすることで、画像そのものを水平方向に中央寄せすることができます。

・150×150の画像、横幅320pxでのmargin

・150×150の画像、横幅1440pxでのmargin

HTML

     
 <div class="img_box">
   <img src="画像のパス" alt="何らかの画像">
 </div>

css

     
 .img_box{
   text-align: center;
 }

親要素にtext-align: center;を指定することで、その子である画像は水平方向に中央寄せすることができます。

注意点としては、img要素そのものにcenterを指定しても、何も起きないので必ずその親要素に指定しましょう。

HTML

       
 <div class="img_box">
   <img src="画像のパス" alt="何らかの画像" class="img">
 </div>

css

       
 .img_box{
   position: relative;
 }
 .img{
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
 }

親要素にposition: relative;　子要素にposition: absolute;を指定することで、要素を相対的に配置することができます。

特にabsoluteについては、直近の祖先で配置されているものに対して相対配置されるため、親要素への相対指定は必須です。

ちなみにleft: 50%;だけだと微妙にずれます。仕様としては正しい動きなんですが、それは要素の左上を起点として配置されているからです。

先ほどの相対位置の指定を使えば、上下左右に中央寄せすることができます。

HTML

         
 <div class="img_box">
   <img src="画像のパス" alt="何らかの画像" class="img">
 </div>

css

         
 .img_box{
   position: relative;
 }
 .img{
   position: absolute;
   top : 50%;
   left: 50%;
   transform: translate(-50% , -50%);
 }

先ほどのleftと同じように、topも指定することで親要素から上下左右中央に指定することができます。

今回は画像の中央寄せということで、いくつか方法をご紹介しましたが、画像に限らずほとんどの要素で同じスタイルを当てることができます。

また、厳密に言うと親要素からの中央寄せとなるので親要素の場所次第では、応用が効きます。

ぜひ、参考にしてみてください。

B! LINE