首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在fancybox-3中将缩略图居中

如何在fancybox-3中将缩略图居中
EN

Stack Overflow用户
提问于 2019-05-18 13:09:42
回答 1查看 327关注 0票数 1

看起来在旧版本的fancybox上有一个缩略图助手,可以将缩略图居中放置在图像下面。

按照这里的例子:https://codepen.io/fancyapps/pen/PdMvML我可以把缩略图放在底部,但我想把缩略图居中。有没有人已经想好怎么做了?

下面是CSS,但底部有缩略图:

代码语言:javascript
复制
@media all and (min-width: 768px) {
  .fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0;
    left: 0;
    right : 0;
    height: 95px;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
  }

  .fancybox-show-thumbs .fancybox-inner {
    right: 0;
    bottom: 95px;
  }
}

下面是自动启动缩略图的javascript。

代码语言:javascript
复制
$('[data-fancybox="images"]').fancybox({
  thumbs : {
    autoStart : true,
    axis      : 'x'
  }
})
EN

回答 1

Stack Overflow用户

发布于 2019-05-18 13:14:21

您可以使用以下命令将所有拇指图像居中:

代码语言:javascript
复制
p.imglist {
text-align: center !important;
}

<p class="imglist"> </p>

因为图像位于带有类.imglist的p标记中。使用这个,所有的图像都会出现在中心。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56196144

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档