【发布时间】：2017-04-03 22:50:36
【问题描述】：
我试图弄清楚如何将某些 div 放置在屏幕中间以制作珍珠项链类型的形状。形状应如下所示：
0 0
0 0
0 0
0 0
0
0
我想在移动离子应用程序上使用 jquery 执行此操作。我的目标是让这些“珠子”在屏幕上居中。这是我用于视图的 html，如果需要，我很乐意更改：
<ion-view view-title="Pray the Rosary" id="prayer">
<ion-content>
<div id="prayer-content">
<div id="current">Sorrowful Mysteries</div>
<div ng-click="play()" id="play">Begin</div>
<div ng-click="pause()" id="pause">Pause</div>
<div class="bead" ng-class="inactive" id="bead14"></div>
<div class="bead" id="bead13"></div>
<div class="bead" id="bead12"></div>
<div class="bead" id="bead11"></div>
<div class="bead" id="bead10"></div>
<div class="bead" id="bead9"></div>
<div class="bead" id="bead8"></div>
<div class="bead" id="bead7"></div>
<div class="bead" id="bead6"></div>
<div class="bead" id="bead5"></div>
<div class="bead" id="bead4"></div>
<div class="bead" id="bead3"></div>
<div class="bead" id="bead2"></div>
<div class="bead" id="bead1"></div>
<div id="cross"><img src="../img/images/cross.png" alt=""></div>
</div>
</ion-content>
</ion-view>
我当前的 CSS：
/*Prayer content*/
#prayer-content{
width: 90%;
padding: 10%;
text-align: center;
position:relative;
}
.bead{
border-radius: 50%;
width: 20px;
height: 20px;
background: #8ee5f5;
}
.active{
background: #006baf;
border: 1px dashed #fff;
}
#cross{
position: absolute;
top: 320px;
left: 154px;
}
#bead1{
position: absolute;
top: 292px;
left: 196px;
}
#bead2{
position: absolute;
top: 266px;
left: 196px;
}
#bead3{
position: absolute;
top: 240px;
left: 196px;
}
#bead4{
position: absolute;
top: 201px;
left: 191px;
width: 30px;
height: 30px;
}
#bead5{
position: absolute;
top: 180px;
left: 223px;
}
#bead6{
position: absolute;
top: 155px;
left: 236px;
}
#bead7{
position: absolute;
top: 126px;
left: 248px;
}
#bead8{
position: absolute;
top: 95px;
left: 240px;
}
#bead9{
position: absolute;
top: 76px;
left: 215px;
}
#bead10{
position: absolute;
top: 76px;
left: 180px;
}
#bead11{
position: absolute;
top: 95px;
left: 155px;
}
#bead12{
position: absolute;
top: 126px;
left: 151px;
}
#bead13{
position: absolute;
top: 153px;
left: 160px;
}
#bead14{
position: absolute;
top: 180px;
left: 173px;
}
在 iphone 视图上看起来不错，但在 ipad 上看起来很混乱...我可以使用 javascript 执行此操作以确保珠子始终保持在中心对齐吗？
感谢您的意见！
JS 小提琴： https://jsfiddle.net/tetxwj8k/
【问题讨论】：
-
如果你能添加一个显示这个的 jsfiddle 链接，那就太棒了。
-
我添加了链接。感谢您的意见！
-
我尝试更改分辨率并使用 Chrome 的设备工具栏进行测试，但它仍然显示完美。如果可能的话，您能否添加屏幕截图以了解它在 iPad 上的外观？看起来“杂乱无章”吗？如果是这样，怎么做？还是只是不在中心？
-
是的，我想通了。它没有居中，所以我创建了一个 div，它是珠子形状的宽度，并以
margin: 0, auto; position: relative;使 div 居中，无论屏幕大小如何，它都保持在中心。感谢您的评论！
标签： javascript jquery html css ionic-framework