Question

我希望将<span>元素的“列表”垂直居中放置在离子ion-scroll中，并尝试了几乎所有可以找到的“居中”样式，但却无法将其置于中心位置...

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

它将向您解释如何操作。
对于ghost元素，它使用css()与after, before一起实现它。

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

Answer 2

你可以尝试这个

display table-cell和table

就像这样

定义您的div display table和定义您的ion-scroll display {{1 }}

＆＃13;

tablep-cell

＆＃13;

如何在离子离子卷轴内居中

2 个答案: