slickのdotsボタンを左右真ん中に配置するときのポイント

slickを使ったスライダーを作ってる際に、dotsボタンがうまく真ん中配置にならない場合があります。そんなときの確認するポイントです。

HTML

Slickを設置し、dotsボタンを表示するように設定した場合、以下のようなslick-dotsというクラスがついたdotsボタンが、slick-listの下に自動で生成されます。

 
 

CSS

cssを設定することで、dotsボタンの色や形、位置など好きなように設定できますが、スライダー画像の下部に真ん中寄せで設置したい場合のポイントは下記。
①slick-dotsにwidth:100%を設定する。
②slick-dotsにtext-align:center;
③slick-dots liを横並びにする際に、float:left;ではなく、display:inline-blockを設定する。

これで大抵のパターンでは、真ん中寄せになるかと思います…!