极客观点
项目管理
HarmonyOS
要在产品图片显示在中间，一直在最下边，不知道怎么变
<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]
改成
试试看。。。
可能是因为你的
div#dowebok2嵌套的比较深的缘故吧。。。。我觉得
viewer是根据body来设置居中的（要想知道的话，你得去研究一下viewer.js的源码了），绑定
.viewer({。。。 });的dom可能是body或者body的子元素才能很好的居中，是不是这样，我也不是很确定。如果你显示在
div#dowebok2或者图片产品的div里面，并且居中，你可以使用viewer官网例子的inline mode试试。