レスポンシブで画像の表示位置を変えたいです。
超初歩的な質問で申し訳ございません。
前提・実現したいこと
画像を、
Web上では右寄せ
スマホ画面では中央寄せにしたい
発生している問題・エラーメッセージ
該当のソースコード
.right {margin-left: auto;}
と、
@media screen and (max-width: 650px){
.center{
text-align: center;
}
}
上記併用すると「.right」のみが適応されてスマホ画面上でも右寄せになってしまう
上記CSSが該当するHTML↓
<div class="center right"> <img src="images/××.jpg"> </div>宜しくお願い致します。
メディアクエリは、デバイスの幅によってHTMLに付与したクラスのCSS内容を変えるもので、違うクラスには適用されません。
該当するHTMLも併せて提示してください。
あとコードは` `か``` ```で囲んでください
ご回答ありがとうございます
該当するHTMLは以下です。
<div class="center right"> <img src="images/××.jpg"> </div>
質問文は、編集出来ますので、HTMLのコードはコメント欄ではなく、質問文を編集して追加してください。
失礼いたしました、追加しました。。
質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、他の要素との関係性やそこに適用されたCSSで挙動が変わる可能性があるため、問題が起きるサイトのURL、もしくは状況の再現が可能なHTML/CSSを質問文に追記ください。
CSSでは、divはブロック要素、imgはインライン要素となります。
ブロック要素とインライン要素の中央寄せや右寄せは、それぞれ違いますので、再度確認されてみてください。