Q&A
ご回答ありがとうございます。
試してみましたが駄目です。。
headerタグに対して、別にcssを適用しているのですが、これも原因でしょうか？
header{
padding-left: 40px;
}
レスポンシブで、画面を小さくしたときに画像を左寄せから中央ぞろえに変えたいです。
初心者的な質問で恐縮です。
様々なhtmlのサイトで検索してみましたがうまくいかず質問させてください。
メタタグで、特定の画像を「PCサイズ時には左寄せ」、「スマホサイズ時には」中央ぞろえにしたいです。
下記のサイトでpタグのやり方を例に挙げていたので、同じようにimgタグでもできると思い
試してみましたができません。。
該当のソースコード
【head】
<meta name="viewport" content="width=device-width, initial-scale=1.0">【HTML】
<body> <header> <a href="https://www.try110.com/" target="_blank"><img src="img/logo.png" alt="会社アイコン"></a> </header> </body>【CSS】
@media screen and ( max-width:479px )
{
a{
text-align: center;
width: 100%;
}
}
回答2件
0
自己解決
CSSでコーディング見直しはせず、
bootstrapのグリッドシステムを記入して解決。
【head】
<meta name="viewport" content="width=device-width, initial-scale=1.0">
【HTML】
<body> **<div class="container">** <header> ** <div class="container"> <div class="row">** <a **class="col-sm-12"** href="https://www.try110.com/" target="_blank"><img src="img/logo.png" alt="会社アイコン"></a> ** </div> </div>** </header>________________________________________ 【CSS】 header{padding-left: 25px;}@media screen and ( max-width:500px ) {
header{
text-align: center;
width: 100%;
}
}
投稿2021/01/23 08:41
総合スコア2
0
下記でどうでしょう。
css
1@media screen and ( max-width:479px ) { 2 header a { 3 display: flex; 4 justify-content: center; 5 width: 100%; 6 } 7}
↓動作確認用サンプル
CodePenサンプル
投稿2021/01/18 15:21
編集2021/01/19 11:23
総合スコア34073
回答に CodePenサンプルを追加しましてので、確認ください。
ありがとうございます。
試してみましたが此方もダメでした。
headerタグに対しては記載以上の指定は一切していないので他の要素が原因なのは少し考えづらいのかなと思っています。
追加したサンプルでは画面幅を479px以下にすると、画像は中央に配置されますよね。それは確認しましたか。
そちらでうまくいかないなら、その現象が再現できるHTMLとCSSを質問に追加してください。
サイズ幅を狭めての確認もしています。
解決できませんでしたがご助力ありがとうございます
どのような環境で確認してますか。OS ブラウザ は何ですか。また、それぞれのバージョンは？
OS：Windows10 ver 1909
ブラウザ：chrome ver 87.0.4280.141
VSC利用
です
ほぼ同じ環境ですね。提示したCodePen上で確認しても動作しないのですか。
当方の環境では問題なく動作しますので、私からこれ以上のアドバイスは無理です。
色々試したところ自己解決できました。
アドバイスありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。