Fatal编程技术网
  • html/
  • Html 如何设置与文本相关的角度材质的mdRadioButton指令的垂直对齐？

Html 如何设置与文本相关的角度材质的mdRadioButton指令的垂直对齐？

html css angular-material

Html 如何设置与文本相关的角度材质的mdRadioButton指令的垂直对齐？,html,css,material-design,angular-material,Html,Css,Material Design,Angular Material,如何设置与文本相关的mdRadioButton角材质指令的垂直对齐？ 我尝试了layout align和vertical align样式，但是单选按钮总是与文本相关的中间对齐 那是普朗克吗 <md-content> <md-radio-group ng-model="data" style="vertical-align:top;"> <md-radio-button value="a" aria-label="Label 1" style

如何设置与文本相关的
mdRadioButton
角材质指令的垂直对齐？ 我尝试了
layout align
和
vertical align
样式，但是单选按钮总是与文本相关的中间对齐

那是普朗克吗

<md-content>
    <md-radio-group ng-model="data"  style="vertical-align:top;">
        <md-radio-button value="a" aria-label="Label 1" style="vertical-align:text-top;">long text 1</md-radio-button>
        <md-radio-button value="b"> long text 2 </md-radio-button>
    </md-radio-group>
</md-content>


长文本1
长文本2
角度材质实际上为单选按钮的开/关状态和波纹生成了一个容器

是父元素，
\u md-container
是要修改的子元素

使用修改后的样式：

md-radio-button ._md-container {
    top: 0;
    transform: translateY(0);
}
希望这有帮助

对于角度，可通过以下方式实现：

mat-radio-button .mat-radio-label-content {
    white-space: normal;
}

mat-radio-button .mat-radio-label {
    align-items: normal;
}
活生生的例子：

稍微改进@athlan的答案

最好只在单选按钮元素上设置垂直对齐，而不要设置标签，否则非包装标签无法正确对齐

我还使用了一个额外的类选择器来选择这种行为：（sass）

.mat-radio-button.wrapping-radio-button{
&.垫式无线电容器{
自我校准：正常；
}
&.mat无线电标签内容{
空白：正常；
}
}
在模板中
不错。我建议
top:5px，只是为了更好地对齐。此外，值得一提的是，中间对齐是由于
top:50%；转化：translateY（-50%）。谢谢你，克尔伯特