WordPressテーマSANGOの質問

画像表示サイズを小さくした場合に中央揃えにしたい

アバター
RYO

いつもお世話になっております。

画像の表示サイズを変更した場合に中央揃えにする方法を教えていただきたくご連絡いたしました。

私のサイトでは,画像に対して下記CSSを適用しています。
img {
pointer-events: none;
}

上記CSSだけでは画像上のリンクが機能しなくなるため,下記CSSもあわせて使用しています。
a {
display: inline-block;
}

しかし,aタグをdisplay: inline-blockとしてしまうと画像上にリンクを貼った場合に中央揃えができず,左揃えになってしまいます。

どのように指定すれば画像上のリンクを機能させながら,中央揃えを反映させられますか。

お忙しいところお手数ですが,どうぞよろしくお願いいたします。

画像のサイズを変えたり影をつけたりする方法
画像のサイズ変更や影をつける方法
コメントへの回答
サルワカくん
サルワカくん
2021/03/20

いつもお世話になっております。

imgをpointer-events:noneにする理由はなぜでしょうか?
この様に記述するとimgタグに対してクリックなどができなくなってしまいます。
さらに、aタグやimgタグに直接スタイルを指定するのは他のスタイルに影響を及ぼすため危険です。
imgタグに付与されているクラスや、aタグに付与されているクラスに対してスタイルを指定する様にしてみてください。
また、そのさいに、imgにinline-blockを指定し、親要素にtext-align: center; display: block;を指定してみてはいかがでしょうか?
よろしくお願いします。