Javascript bxslider幻灯片中的图像中心问题

我在集中本幻灯片中的图像时遇到问题（使用bxslider）——

我已经通过谷歌尝试了好几天的各种方法，但发现自己被卡住了，所以非常感谢任何帮助或建议

谢谢

意志

---

HTML>











收集












CSS>
标题{
左边距：自动；
右边距：自动；
文本对齐：居中；
位置：固定；
z指数：10；
}
.桌子{
左边距：75px；
文字装饰：无；
边缘顶部：300px；
}
/*导航菜单*/
#导航{
字体大小：粗体；
字体大小：1.3em；
填充：20px；
边缘顶部：20px；
左侧填充：66px；
文本对齐：居中；
}
#导航ul{
填充：0；
列表样式：无；
显示：块；
文本对齐：居中；
}
#导航a:链接，#导航a:已访问{
颜色：#ae55ed；
文字装饰：无；
}
#导航a{
填充：12px 16px；
}
#导航a：悬停{
填充：12px 16px；
颜色：#F00；
}
#李海军{
浮动：左；
右边距：1px；
位置：相对位置；
}
#李海军：以前{
内容：“|”；
颜色：#fff；
}
#李海军：第一个孩子：之前{
内容：无；
}
#李娜薇{
宽度：160px；
页边顶部：1px；
}
#李导航：悬停{
颜色：#F00；
}
#导航李莉：悬停{
颜色：#F00；
}
#导航ul{
位置：绝对位置；
可见性：隐藏；
}
#导航ul{
位置：绝对位置；
左：100%；
顶部：-2px；
边框：实心1px透明；
}
#导航李：悬停>ul{
能见度：可见；
}
/**重置和布局
===================================*/
.bx包装{
位置：相对位置；
保证金：0自动60像素；
填充：0；
*缩放：1；
}
.bx包装器img{
最大宽度：100%；
显示：块；
保证金：0自动；
}
/**主题
===================================*/
.bx包装器.bx视口{
-moz盒阴影：0 0 3px#ccc；
-网络工具包盒阴影：0 3px#ccc；
盒影：0 0 3px#ccc；
边框：3px实心#fff；
左：-3px；
背景：#fff；
/*修复移动页面上的其他元素（在Chrome上）*/
-webkit转换：translatez（0）；
-moz变换：translatez（0）；
-ms变换：translatez（0）；
-o变换：translatez（0）；
变换：translatez（0）；
}
.bx wrapper.bx寻呼机，.bx wrapper.bx控件自动{
位置：绝对位置；
底部：-30px；
宽度：100%；
}
/*装载机*/
.bx包装器.bx加载{
最小高度：50px；
背景：url（images/bx_loader.gif）中心不重复#fff；
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
z指数：2000；
}
/*传呼机*/
.bx包装器.bx寻呼机{
文本对齐：居中；
字体大小：.85em；
字体系列：Ubuntu；
字体大小：粗体；
颜色：#666；
填充顶部：20px；
}
.bx wrapper.bx pager.bx pager项，.bx wrapper.bx控制自动。bx控制自动项{
显示：内联块；
*缩放：1；
*显示：内联；
}
.bx包装器.bx-pager.bx-default-pager a{
背景:#666；
文本缩进：-9999px；
显示：块；
宽度：10px；
高度：10px；
利润率：0.5px；
大纲：0；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.bx wrapper.bx-pager.bx-default-pager a:悬停，.bx wrapper.bx-pager.bx-default-pager a.激活{
背景：#000；
}
/*方向控制（下一个/上一个）*/
.bx wrapper.bx prev{
左：10px；
背景：url（images/controls.png）不重复0-32px；
}
.bx包装器.bx下一个{
右：10px；
背景：url（images/controls.png）不重复-43px-32px；
}
.bx wrapper.bx prev:悬停{
背景位置：0；
}
.bx包装器.bx下一步：悬停{
背景位置：-43px 0；
}
.bx包装。bx控制方向a{
位置：绝对位置；
最高：50%；
利润上限：-16px；
大纲：0；
宽度：32px；
高度：32px；
文本缩进：-9999px；
z指数：9999；
}
.bx包装。bx控制方向a。已禁用{
显示：无；
}
/*自动控制（启动/停止）*/
.bx包装器.bx控件自动{
文本对齐：居中；
}
.bx包装器.bx控制自动.bx启动{
显示：块；
文本缩进：-9999px；
宽度：10px；
高度：11px；
大纲：0；
背景：url（images/controls.png）-86px-11px无重复；
利润率：0.3倍；
}
.bx wrapper.bx控制自动。bx启动：悬停，.bx wrapper.bx控制自动。bx-start.active{
背景位置：-86px 0；
}
.bx包装器.bx控制自动.bx停止{
显示：块；
文本缩进：-9999px；
宽度：9px；
高度：11px；
大纲：0；
背景：url（images/controls.png）-86px-44px不重复；
利润率：0.3倍；
}
.bx wrapper.bx控制自动.bx停止：悬停.bx wrapper.bx控制自动.bx停止.active{
背景位置：-86px-33px；
}
/*具有自动控制混合布局的寻呼机*/
.bx包装器.bx-controls.bx-has-controls-auto.bx-has-pager.bx寻呼机{
文本对齐：左对齐；
宽度：80%；
}
.bx包装器.bx-controls.bx-has-controls-auto.bx-has-pager.bx-controls-auto{
右：0；
宽度：35px；
}
/*图像字幕*/
.bx包装器.bx标题{
位置：绝对位置；
底部：0；
左：0；
背景:#666\9；
背景：rgba（80,80,80,0.75）；
宽度：100%；
}
.bx包装器.bx标题范围{
颜色：#fff；
字体系列：Ubuntu；
显示：块；
字体大小：.85em；
填充：10px；
}

您的.bxslider元素上剩余40像素的填充（以及16像素的边距），这会使图像不对齐，因此只需在css中添加以下内容：

.bxslider {
  margin: 0;
  padding: 0;
}

P

.bxslider {
  margin: 0;
  padding: 0;
}