如何在离子离子滚动中居中跨度

Question

我想在 Ionic ion-scroll 中将 "list" 个 <span> 元素水平居中，并且尝试了几乎所有我能找到的 "centering" 样式，但是只是无法让它居中...

<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> 相对于容器的位置。

有人在这里有什么建议吗？

在此先感谢您的帮助。

Answer 1

阅读这篇文章：

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

它将向您解释如何操作。
它使用 after, before 来实现它以及 height:100% 用于幽灵元素。

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

Answer 2

你可以试试这个

display table-cell 和 table

像这样

定义你的divdisplaytable和定义你的ion-scroll displaytablep-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>

如何在离子离子滚动中居中跨度

How to center spans inside an Ionic ion-scroll

html

css

angularjs

ionic-framework

ionic