将 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>
感谢您查看我的问题。我有一个 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>