将 div 居中,flex = 33

Center a div with flex = 33

感谢您查看我的问题。我有一个 div 在页面上水平扩展,这正是我想要的。我在 div 中有 4 个按钮,我正在使用:

<div layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap >

哪个好。然而,它占据了整个 div 所以按钮看起来很别扭。所以我添加了 flex="33" 现在它们被隔开,但只使用了我想要的页面的三分之一,它看起来不错。我遇到的问题是它占用了前三分之一,我希望它用完页面的后三分之一。有没有办法在不创建不必要的 div 来占据前三分之一的情况下做到这一点?

完整代码如下:

<div flex="33" layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap class="pageNavButtons">
    <div ng-repeat="button in navPage" layout="column" layout-align="center center" style="color: #ffffff">
        <label>{{button.div}}</label>
        <span></span>
        <md-icon md-svg-src="{{button.icon}}"></md-icon>
    </div>
</div>

我还没有CSS。

图片:

之前 flex=33

添加后:

您可以通过使用 flex-offset="33" 或在父级上添加 layout-align="center" layout="row" 来实现。我可能会使用第二个。

<div div layout="row" flex-offset="33">
    <div flex="33" layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap class="pageNavButtons">
        <div ng-repeat="button in navPage" layout="column" layout-align="center center" style="color: #ffffff">
            <label> {{button.div}}</label>
            <span>----- </span>
            <md-icon md-svg-src ={{button.icon}}></md-icon>
        </div>
    </div>
</div>

<div layout="row" layout-align="center">
    <div flex="33" layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap class="pageNavButtons">
        <div ng-repeat="button in navPage" layout="column" layout-align="center center" style="color: #ffffff">
            <label> {{button.div}}</label>
            <span>----- </span>
            <md-icon md-svg-src ={{button.icon}}></md-icon>
        </div>
    </div>
</div>

http://codepen.io/kuhnroyal/pen/mPVdRK