どうもチャーさん(@chaa___san)です。
あなたはcssで画像の中央寄せができないと、
悩んでいませんか？
この記事ではそんな悩みを解決し、
一発で画像を中央寄せできる方法を書いてます。
なのであなたがcssで画像の中央寄せができないと、
悩んでいる場合今すぐページを下に
スクロールして読んでみてください。
*この記事の信頼性
この記事を書いてる僕のプログラミング歴は、
約１年ほどです。
スポンサードサーチ
目次
cssで画像を中央寄せできないのはこれで解決！
早速結論ですが、
画像をcssで中央寄せしたい場合は、
img {
display:block;
margin:auto;
}
とcssを書けばできます。
ここで重要なのは、display:block;の部分です。
なぜならdisplay:block;を書かないとmargin:auto;だけでは、
画像を中央寄せにできないからです。
cssで画像中央寄せでよくあるmargin:autoを使って、
中央寄せできない…と悩む原因はこれです。
なのでdisplay:blockを忘れないようにしましょう。
で本題の画像の中央寄せをもう少し、
具体的に画像で説明します。
さっき上の方で、
img {
display:block;
margin:auto;
}
を書けばいいと話しましたが、
これをcssで書いた場合どう表示されるかというと、
ちゃんと画像が中央寄せになります。
では、display:blockを抜いて、
margin:auto;だけだとどうなるでしょうか？
img {
margin:auto;
}
の場合。
あれれー、画像が左によってしまいましたね。
と、こんな風に画像の場合は、
imgタグにcssでmargin:auto;をつけたとしても、
display:blockがないと中央寄せになりません。
このdisplay:blockに関しては、インライン要素や
ブロック要素など少し難しい説明があります。
ですが、知らなくても紹介したように書けば、
中央寄せはできるので、それでもブロック要素や、
インライン要素などを詳しく知りたい場合は調べてみてください。
ということで、あなたがcssで画像を中央寄せしたい場合は、
display:block;を忘れず書いた上で、
margin:auto;しましょう。
これを書くのが一番手取り早いですよ。
↓
img {
display:block;
margin:auto;
}
スポンサードサーチ
cssで画像の中央寄せをする具体的な方法
で、中央寄せのやり方は説明しましたが、
もしもあなたが全くの初心者と想定してcssやhtmlも、
含め画像の中央寄せのやり方をもう少し詳しく書きます。
cssで画像の中央寄せステップ１：エディター開く
画像を中央寄せするには、
まずはエディターを立ち上げましょう。
（エディターとはプログラミングを書くツールのことで
sublime text やatomなどが使いやすいです。）
cssで画像の中央寄せステップ２：画像を貼り付ける
そしてエディターを開いたら、タグを書いて
まずは画像を貼り付けましょう。
画像を貼り付けるには、
<img src=”画像のパス”>をhtmlのbodyタグの中に
書けばOKです。
イメージとしては、
<body>
<img src = “画像のパス”>
</body>
みたいな感じです。
画像のパスの部分には貼りたい画像のファイル名を書きましょう。
例えばあなたが貼りたい画像のファイル名が、
abcde.pngとかなってれば、
<body>
<img src = “abcde.png”>
</body>
と書けばOKです。
cssで画像の中央寄せステップ３：コードを書く
次に画像がはれたら、
headタグの間に、<style></style>と
書きましょう。
そしてその<style>タグの間に、
img {
display:block;
margin:auto;
}
と書きましょう。
具体的には、
<head>
<style>
img {
display:block;
margin:auto;
}
</style>
</head>
のような感じです。
こうすることであなたがhtmlのとこで書いた
imgタグに対してcssを使うことができ、
中央寄せになってくれます。
cssで画像の中央寄せステップ４：ファイルを保存して開く
これができたら次は、あなたがエディターに書いた
ファイルを保存して、書いたコードのファイルを開きましょう。
保存するときは、index.htmlなどの名前で保存するとOKです。
ファイルを開くには保存してできた、
あなたのコードが書いてるファイルを、
ダブルクリックすればOKです。
そしたら書いたコードの結果が表示されるので、
ちゃんと中央寄せになってるか確認しましょう。
中央寄せになってたらOKです。
スポンサードサーチ
cssで画像の中央寄せができないを解決する動画
動画でもcssでの画像の中央寄せの、
やり方は説明したのでよければどうぞ。
スポンサードサーチ
まとめ
画像を中央寄せしたい場合は、
img {
display:block;
margin:auto;
}
とcssのとこで書きましょう。
そうすれば画像が中央寄せになってくれます。
そしてこの時、display:blcok;がないと中央寄せに
ならないので、注意してください。
それでは早速あなたも実践してみてください。
まずはエディターを開いてImgタグを書いて、
画像を貼り付けましょう。
それから、
img {
display:block;
margin:auto;
}
をstyleタグの中にコピペすればokです。
すぐに実践するとあなたの力になりますよ。
また、cssについてもっと上達したい
学習したいと思っているならば、
以下の記事をどうぞ。
それでは読んでもらってありがとうございました。
チャーさん
