目前,当浏览器的宽度变小时...我的图标最终会向左浮动。
如何让它们水平居中?任何帮助将不胜感激。
HTML:
<div ng-app="sandbox">
<div layout="column" layout-fill>
<div class="flexbox-parent">
<div layout="row" layout-align="center center" style="height: 600px;">
<div id="icons">
<i class="fa fa-facebook fa-5x circle-icon"></i>
<i class="fa fa-facebook fa-5x circle-icon"></i>
<i class="fa fa-facebook fa-5x circle-icon"></i>
</div>
</div>
</div>
</div>
</div>
CSS:
#icons i {
color: #fff;
margin-left: 10px;
margin-right: 10px;
}
.circle-icon {
background: #3b5998;
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
line-height: 100px;
vertical-align: middle;
padding: 30px;
}
我尝试在 #icons
上使用 layout-align="center center"
最佳答案
我不确定是否有 Angular Material 类,但您可以通过在包装器上手动设置 text-align: center
来实现。在四个例子中你会这样:
#icons {
text-align: center;
}
关于css - Angular Material css 对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40333576/