如何在离子离子卷轴内居中跨度答案

【问题标题】：How to center spans inside an Ionic ion-scroll如何在离子离子卷轴内居中跨度
【发布时间】：2015-12-28 07:19:42
【问题描述】：

我想在 Ionic ion-scroll 中水平垂直居中 <span> 元素的“列表”，并且尝试了几乎所有我能找到的“居中”样式，但就是无法使其居中...

<body ng-app='app' ng-controller='Index as vm'>
 <ion-content scroll=false>
      <div style="padding: 0px;height=80px;width:30%;align=center" >
      <ion-scroll class="center" scrollbar-x=false direction="x" 
            style="text-align:center;background-color:pink;height: 80px;width:99%;white-space: nowrap">
          <span class='center' style="text-align:center;margin:5px;background-color:red;align=center" ng-repeat='d in vm.data'>{{d}}</span>
       </ion-scroll>
        </div>
    </ion-content>
 </body>

Here 是上述的 Plunk。

我已将 <span> 元素着色为红色，将容器着色为粉红色，以便我们可以看到 <span> 相对于容器的位置。

这里有人有什么建议吗？

提前感谢您的帮助。

【问题讨论】：

标签： html css angularjs ionic-framework ionic

【解决方案1】：

阅读这篇文章：

https://css-tricks.com/centering-in-the-unknown/

它将向您解释如何做到这一点。
它使用after, before 和height:100% 实现幽灵元素。

可在此处找到此演示：
http://codepen.io/chriscoyier/pen/gsodI

【讨论】：

感谢您的信息。
谢谢你，它工作得非常好，一旦我使内容更复杂（即不仅仅是一个跨度），它似乎不会与任何宽度的容器混淆。
太棒了。如果您可以接受它作为答案，如果它对您有所帮助并按照您的要求进行，则将被占用。

【解决方案2】：

你可以试试这个

displaytable-cell和table

像这样

定义你的divdisplaytable和定义你的ion-scrolldisplaytablep-cell

<div style="padding: 0px;height:80px;width:30%;align:center; background:green;display:table" >
      <ion-scroll class="center" scrollbar-x=false direction="x" 
            style="text-align:center;background-color:pink;display:table-cell; vertical-align:middle;height: 80px;width:99%;white-space: nowrap">
          <span class='center' style="text-align:center;margin:5px;background-color:red;align=center" ng-repeat='d in vm.data'>{{d}}</span>
       </ion-scroll>
        </div>

【讨论】：