【问题标题】:How can I center the thumbnails in fancybox-3如何在fancybox-3中居中缩略图
【发布时间】:2019-05-18 05:09:42
【问题描述】:

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

按照此处的示例:https://codepen.io/fancyapps/pen/PdMvML 我可以将缩略图放在底部,但我想将缩略图居中。有没有人已经想出了如何做到这一点?

这是 CSS 到但底部的缩略图:

@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。

$('[data-fancybox="images"]').fancybox({
  thumbs : {
    autoStart : true,
    axis      : 'x'
  }
})

【问题讨论】:

    标签: thumbnails fancybox-3


    【解决方案1】:

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

    p.imglist {
    text-align: center !important;
    }
    
    <p class="imglist"> </p>
    

    因为图像来自带有 .imglist 类的 p 标签。使用它,所有图像都会出现在中心。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-06-19
      • 1970-01-01
      • 2013-11-27
      • 2020-12-30
      • 1970-01-01
      • 2015-05-04
      • 2012-10-14
      • 2013-01-26
      相关资源
      最近更新 更多