在屏幕上定位div以呈现特定形状

Question

我正在尝试找出如何将某些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/

- Atlante Avila

---

如果您可以添加一个显示此内容的 jsfiddle 链接，那将非常棒。 - TheNavigat

我添加了链接。感谢您的输入！ - Atlante Avila

我尝试更改分辨率，并使用Chrome的设备工具栏进行测试，它仍然表现完美。如果可能的话，您能否添加iPad上外观的屏幕截图？它看起来是否“混乱”？如果是这样，是什么情况？还是只是不在中心？ - TheNavigat

是的，我解决了这个问题。它没有居中，所以我创建了一个与珠子形状宽度相同的div，并使用margin: 0, auto; position: relative;将div居中，这使得它始终保持在中心位置，无论屏幕大小如何。感谢您的评论！ - Atlante Avila

Answer 1

/*Prayer content*/
#prayer-content{
  width: 128px;
  padding: 0;
  text-align: center;
  position:relative;
  margin: 0 auto;
  min-height: 489px;
  margin-top: -35px;
}
.bead{
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #8ee5f5;
}
.active{
  background: #006baf;
  border: 1px dashed #fff;
}
#cross{
  position: absolute;
  top: 320px;
  left: 154px;
}
.bead{
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #8ee5f5;
}
.active{
  background: #006baf;
  border: 1px dashed #fff;
}
#cross{
  position: absolute;
  top: 320px;
  left: 6px;
}
#bead1{
  position: absolute;
  top: 292px;
  left: 49px;
}
#bead2{
  position: absolute;
  top: 266px;
  left: 49px;
}
#bead3{
  position: absolute;
  top: 240px;
  left: 49px;
}
#bead4{
  position: absolute;
  top: 201px;
  left: 45px;
  width: 30px;
  height: 30px;
}
#bead5{
  position: absolute;
  top: 180px;
  left: 87px;
}
#bead6{
  position: absolute;
  top: 155px;
  left: 105px;
}
#bead7{
  position: absolute;
  top: 126px;
  left: 117px;
}
#bead8{
  position: absolute;
  top: 95px;
  left: 100px;
}
#bead9{
  position: absolute;
  top: 76px;
  left: 70px;
}
#bead10{
  position: absolute;
  top: 76px;
  left: 30px;
}
#bead11{
  position: absolute;
  top: 95px;
  left: 0px;
}
#bead12{
  position: absolute;
  top: 126px;
  left: -10px;
}
#bead13{
  position: absolute;
  top: 153px;
  left: 0px;
}
#bead14{
  position: absolute;
  top: 180px;
  left: 15px;
}

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

这是我保持居中的解决方案：

- Atlante Avila