css - 如何垂直对齐较小的材质浮动按钮?
问题描述
我有以下代码来创建一些浮动按钮:
<div class='history-buttons__container'>
<button mat-mini-fab>all</button>
<button mat-mini-fab>1y</button>
<button mat-mini-fab>6m</button>
<button mat-mini-fab>30d</button>
</div>
.history-buttons__container > button{
display: block;
margin-bottom: .5rem;
width: 2rem;
height: 2rem;
}
这会产生以下结果:
如果我删除了宽度和高度,它们看起来还不错:
由于这些元素是diplay: block
垂直堆叠的,所以我不能使用vertical-align
. 在缩小图标的同时,如何使项目内的文本居中?
解决方案
使用 flex,您可以轻松完成
.history-buttons__container {
display:flex;
flex-direction:column;
}
.history-buttons__container > button{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: .5rem;
width: 2rem;
height: 2rem;
}
<div class='history-buttons__container'>
<button mat-mini-fab>all</button>
<button mat-mini-fab>1y</button>
<button mat-mini-fab>6m</button>
<button mat-mini-fab>30d</button>
</div>
推荐阅读
- keras - keras.layers.Flatten 不会丢失信息吗?
- google-sheets - 重新组合包含相同列内容的行
- kotlin - 如何发出订阅的结果
- python - 将具有多个日期的字符串转换为日期时间
- godaddy-api - 如何从此 ForEach 循环创建表?
- react-native - 在 React Native 中隐藏 createBottomTabNavigator 选项卡栏
- python - 通过自动编码器加密任何类型的数据和降维方法的自动编码器
- c - 你可以从 lua 修改 C 结构吗?
- android - 在自定义对话框dismiss() 之后调用finish() 时,Android 活动崩溃
- java - 我可以做这样的路径吗