slickスライダーで画像が左に寄るときはmarginで中央寄せにできる

サンプル

slickでスライダーを作ったときに中央に配置していた画像が左に寄ってしまう場合の対処方法。

slickを導入するとimgに”display:block;”が付く。

slickを導入するとimgに"display:block;"が付く

このせいで”text-align:center;”では中央寄せにできなくなった模様(実際、Chromeの上記画面でチェックを設定を外して”display:block;”を無効化すると中央寄せになる)。

imgに”margin:0 auto;”を付けて解決。

ソースコード

ちなみに、サンプルの例(= 以下の例)だとimgの幅を80%にしているせいで「左に寄る問題」が発生してしまうので、そもそもimgの幅を100%にすれば(= 横方向に目一杯広げれば)「左に寄る問題」が発生しなくなる。

HTML
CSS
jQuery

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です