JavaScript で flexslider の画像を小さくしたら、画像部分が左寄せになった。

JavaScript、flexslider　初心者です。

HTML の上部に JavaScript で flexslider の画像を挿入しました。
すると、画像が左端から右端まで、いっぱいに表示されましたが、画像が大きすぎるので、サイズを小さくして表示することとしました。


まず、flexslider.css で　.flexslider .slides img　について
　width: 50%;
のように変更すると、画像は50％で中央配置になりました。
但し、「左端～画像の左側」及び「画像の右側～右端」に白い部分ができていて、白い部分がジャマです。


次に、flexslider.css で　.flexslider　について
　width: 400px; height: 300px;　のように変更、
.flexslider .slides img　についても
　width: 400px; height: 300px;　のように変更。
すると、画像の両端の白い部分は消えました。

但し、もともと中央配置になっていたものが、flexslider の部分(画像部分)だけ左寄せになってしまい、
.flexslider　について
　margin-right: auto; margin-left: auto;　
を記述しても中央配置になりません。


「画像サイズを小さくして」「画像の両端の白い部分は表示せず」「中央揃えする」
にはどのようにすればよいか、ご教示お願い致します。



/*　元々の　flexslider.css　の記述内容　*/
/*　画像が端から端まで、いっぱいに表示されている。　*/

.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
margin: 0 auto;
display: block;
}



/*　.flexslider .slides img　について　width: 50%;　のように変更すると、画像は50％で中央配置になる。　*/
/*　但し、「左端～画像の左側」及び「画像の右側～右端」に白い部分ができる。　*/

.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 50%;
margin: 0 auto;
display: block;
}



/*　.flexslider　について　width: 400px; height: 300px;　のように変更、*/
/*　.flexslider .slides img　についても　width: 400px; height: 300px;　のように変更　*/
/*　すると、画像の両端の白い部分は消える。　*/
/*　但し、もともと中央配置になっていたものが、flexslider　の部分だけ左寄せになってしまう。　*/
/*　.flexslider　について　margin-right: auto; margin-left: auto;　を記述しても中央配置にならない。　*/

.flexslider {
margin-right: auto;
margin-left: auto;
padding: 0;
width: 400px;
height: 300px;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 400px;
height: 300px;
margin: 0 auto;
display: block;
}

No.1 ベストアンサー 回答者： fujillin 回答日時： 2019/04/12 10:21

こんにちは

flexsliderは存じませんが・・・

質問文には記載されていませんが、.flexslider要素の表示位置関係（親要素が何か、positionn:absolute等で表示していないか）や自身の要素種別（ブロックorインライン）などが影響している可能性があります。

CSSの設定が他のCSSで打ち消されている可能性も考えられますので、ひとまず、要素内の属性として
　style="margin:0 auto;"
などを設定しても左寄せのままかどうかを確認してみます。

これで変わらない場合は、自身がブロック要素になっているかや親要素との関係を調べてください。
さらには、position指定がどうなっているかを確認すれば、どこかで原因が発見できるのではないかと想像します。

この回答へのお礼

おかげさまで、無事修正できました。
ありがとうございました。

お礼日時：2019/04/12 15:18