关于viewer.js的问题 图片查看时如何设置居中

要在产品图片显示在中间,一直在最下边,不知道怎么变

<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/public_css/viewer.min.css">
    <link rel="stylesheet" href="css/public_css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/public_js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/public_js/viewer-jquery.min.js"></script>
    <script type="text/javascript" src="js/public_js/bootstrap.min.js"></script>
</head>

<body>
   <div>
       <ol class="breadcrumb">
           <li><a href="#">我的资源</a></li>
           <li><a href="#">产品详情</a></li>
           <li class="active">联想MIIX 4-6Y54</li>
       </ol>
   </div>
   <div style="margin: 20px 0 0 35px;">
       <span class="label label-default" style="font-size: 100%">联想MIIX 4-6Y54</span>
   </div>
   <div class="col-md-12">
     <div class="col-md-6 column" style="margin: 20px 10px 10px 40px">
       <table class="table table-bordered table-hover">
        <tr>
           <td class="col-md-2" style="font-size: large;font-weight: bold">基本参数</td>
           <td class="col-md-4"></td>
        </tr>
        <tr>
           <td>型号别称</td>
           <td></td>
        </tr>
        <tr>
           <td>上市时间</td>
           <td></td>
        </tr>
        <tr>
           <td>产品定位</td>
           <td></td>
        </tr>
        <tr>
           <td>操作系统</td>
           <td></td>
        </tr>
       </table>
           <table class="table table-bordered table-hover">
               <tr>
                   <td class="col-md-2" style="font-size: large;font-weight: bold">处理器</td>
                   <td class="col-md-4"></td>
               </tr>
               <tr>
                   <td>处理器</td>
                   <td></td>
               </tr>
               <tr>
                   <td>核心/线程</td>
                   <td></td>
               </tr>
               <tr>
                   <td>核心架构</td>
                   <td></td>
               </tr>
               <tr>
                   <td>处理器系列</td>
                   <td></td>
               </tr>
               <tr>
                   <td>处理器主频</td>
                   <td></td>
               </tr>
               <tr>
                   <td>最高频率</td>
                   <td></td>
               </tr>
               <tr>
                   <td>三级缓存</td>
                   <td></td>
               </tr>
           </table>
           <table class="table table-bordered table-hover">
               <tr>
                   <td class="col-md-2" style="font-size: large;font-weight: bold">存储设备</td>
                   <td class="col-md-4"></td>
               </tr>
               <tr>
                   <td>内存容量</td>
                   <td></td>
               </tr>
               <tr>
                   <td>内存类型</td>
                   <td></td>
               </tr>
               <tr>
                   <td>硬盘类型</td>
                   <td></td>
               </tr>
               <tr>
                   <td>硬盘容量</td>
                   <td></td>
               </tr>
               <tr>
                   <td>光驱类型</td>
                   <td></td>
               </tr>
           </table>
           <table class="table table-bordered table-hover">
               <tr>
                   <td class="col-md-2" style="font-size: large;font-weight: bold">显示屏</td>
                   <td class="col-md-4"></td>
               </tr>
               <tr>
                   <td>屏幕尺寸</td>
                   <td></td>
               </tr>
               <tr>
                   <td>分辨率</td>
                   <td></td>
               </tr>
               <tr>
                   <td>屏幕类型</td>
                   <td></td>
               </tr>
               <tr>
                   <td>显视屏描述</td>
                   <td></td>
               </tr>

           </table>
           <table class="table table-bordered table-hover">
               <tr>
                   <td class="col-md-2" style="font-size: large;font-weight: bold">显示卡</td>
                   <td class="col-md-4"></td>
               </tr>
               <tr>
                   <td>显卡类型</td>
                   <td></td>
               </tr>
               <tr>
                   <td>显卡芯片</td>
                   <td></td>
               </tr>
               <tr>
                   <td>显卡容量</td>
                   <td></td>
               </tr>
               <tr>
                   <td>显卡性能</td>
                   <td></td>
               </tr>

           </table>
           <table class="table table-bordered table-hover">
               <tr>
                   <td class="col-md-2" style="font-size: large;font-weight: bold">输入输出</td>
                   <td class="col-md-4"></td>
               </tr>
               <tr>
                   <td>输入设备</td>
                   <td></td>
               </tr>
               <tr>
                   <td>USB</td>
                   <td></td>
               </tr>
               <tr>
                   <td>其他接口</td>
                   <td></td>
               </tr>
           </table>
           <table class="table table-bordered table-hover">
               <tr>
                   <td class="col-md-2" style="font-size: large;font-weight: bold">规格定位</td>
                   <td class="col-md-4"></td>
               </tr>
               <tr>
                   <td>电池类型</td>
                   <td></td>
               </tr>
               <tr>
                   <td>电源适配器</td>
                   <td></td>
               </tr>
               <tr>
                   <td>续航时间</td>
                   <td></td>
               </tr>
               <tr>
                   <td>规格</td>
                   <td></td>
               </tr>
               <tr>
                   <td>厚度</td>
                   <td></td>
               </tr>
               <tr>
                   <td>重量</td>
                   <td></td>
               </tr>
           </table>
       <table class="table table-bordered table-hover">
           <tr>
               <td class="col-md-2" style="font-size: large;font-weight: bold">企业信息</td>
               <td class="col-md-4"></td>
           </tr>
           <tr>
               <td>企业名称</td>
               <td></td>
           </tr>
       </table>
         </div>
   <div class="col-md-5" style="margin:10px 10px 10px 40px">
       <h4 class="col-md-3">
           产品图片
       </h4>
       <hr class="col-md-6" style="filter:progid:DXImageTransform.Microsoft.Glow(strength=10)" width="90%"  size="1" />
       <a class="btn" href="#">更多</a>
   </div>
       <div class="col-md-4" style="margin: 20px 10px 10px 40px">
       <div id="dowebok2"  class="col-md-6">

           <a class="thumbnail">
               <img data-original="image/computer1.jpg" src="image/computer1.jpg"
                    alt="通用的占位符缩略图">
           </a>
       </div>
       <div  class="col-md-6">
           <a class="thumbnail">
               <img data-original="image/computer2.jpg" src="image/computer2.jpg"
                    alt="通用的占位符缩略图">
           </a>
       </div>
       <div class="col-md-6">
           <a class="thumbnail">
               <img data-original="image/computer3.jpg" src="image/computer3.jpg"
                    alt="通用的占位符缩略图">
           </a>
       </div>
       <div class="col-md-6">
           <a class="thumbnail">
               <img data-original="image/computer4.jpg" src="image/computer4.jpg"
                    alt="通用的占位符缩略图">
           </a>
       </div>
   </div>
   </div>
</body>
<script>
    $(function() {
        $('#dowebok2').viewer({
            url: 'data-original',
        });

    });
</script>
</html>
![图片描述][1]

改成

$('body').viewer({
            url: 'data-original',
        });

试试看。。。

可能是因为你的div#dowebok2嵌套的比较深的缘故吧。。。。
我觉得viewer是根据body来设置居中的(要想知道的话,你得去研究一下viewer.js的源码了),
绑定.viewer({。。。 });dom可能是body或者body的子元素才能很好的居中,是不是这样,我也不是很确定。

如果你显示在div#dowebok2或者图片产品的div里面,并且居中,你可以使用viewer官网例子的inline mode试试。

  • nginx可以给html加自定义头部吗
  • 面试题:一个ajax方法获取到数据后再执行下一个ajax方法 问如有5个或10个这样的方法 该怎么写?
  • 大家都来讨论一下在混合开发app的时候都采用什么样的框架/技术架构/解决方案
  • js的正则替换,带动态参数的怎么替换啊
  • 关于移动端视频播放问题?
  • 注册时同一个用户注册多回,数据库中也出现多条一样的数据,后台已经进行了校验,前台js也限制了两秒提交一次,但是还是会出现多条
  • JavaScript的数组操作中splice如何使用,有哪些注意的地方
  • 网页轮播图数量太大怎么优化
  • 关于点赞的一个疑惑及前后端通信原理的相关问题
  • ueditor和angular一起使用的时候,第一次进入页面可以初始化,第二次初始化不了
  • css打字效果实现