我正在尝试找出如何将某些div放置在屏幕中央,以形成珍珠项链的形状。该形状应该看起来像这样:
0 0
0 0
0 0
0 0
0
0
我希望在移动的ionic应用中使用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 Fiddle: https://jsfiddle.net/tetxwj8k/
margin: 0, auto; position: relative;
将div居中,这使得它始终保持在中心位置,无论屏幕大小如何。感谢您的评论! - Atlante Avila