【基本】親にtext-align画像を右寄せ,中央寄せ,左寄せするには親にtext-alignを指定します。text-alignはインラインの子要素を位置調整するCSSです。alt=""></div>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【画像がdisplay:blockのとき】margin:auto画像にdisplay:blockを指定することで画像の周りにできるなぞの空白を消すことができます。画像にdisplay:blockが指定されているとtext-alignでは左右寄せができません。親ではなく画像にmargin:autoを指定しましょう。【右寄せ】margin-left:auto左の空白を最大にすることで画像を右に押し込む方法です。alt=""></div>【中央寄せ】margin:auto左右の空白を均等に最大にすることで画像を中央に寄せる方法です。alt=""></div>【左寄せ】margin-right:auto右の空白を最大にすることで画像を右に押し込む方法です。alt=""></div>できないときの注意点text-alignは親に指定しているかtext-alignは子要素を位置調整するCSSです。img自身に指定しても効きません。imgの親要素に指定しましょう。この記事を読む親の幅は画像より大きいか親の幅と画像の幅が同じでは寄る場所がありません。空白があるように見えてもそれがpaddingである場合もあります。画像にdisplay:blockを指定していないかtext-alignはインライン要素を位置調整するCSSです。ブロック要素は位置調整できません。先述したようにimgにdisplay:blockを指定した場合は画像自身にmargin:autoを指定しましょう。htmlのブロック要素とインライン要素とは?htmlタグは大きくブロック要素とインライン要素に分かれます。このブロック要素とインライン要素を理解していないとCSSで装飾するときにつまづきますし、html構築でも間違ってしまいます。ケアレスミススペルミスやCSSの優先順位のミスをしている可能性もあります。下記記事を参考に見直してみてください。CSSが効かない原因と回避方法【よくあるケアレスミス】CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。この記事を読む【まとめ】画像を右寄せ,中央寄せ,左寄せする方法インライン要素なら親にtext-align【右寄せ】text-align:right【中央寄せ】text-align:center【左寄せ】text-align:leftブロック要素なら画像にmargin:auto【右寄せ】margin-left:auto【中央寄せ】margin:auto【左寄せ】margin-right:auto以上、画像を右寄せ,中央寄せ,左寄せする方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。