如何为Angular Material的mdRadioButton指令设置与文本相关的垂直对齐方式？

Question

如何设置与文本相关的Angular Material指令的mdRadioButton垂直对齐？我已经尝试了 layout-align 和 vertical-align 两种风格，但是，单选按钮总是与文本相关的中间对齐。

here 是骗子

<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>

Answer 1

Angular Material 实际上为单选按钮的 on/off 状态和波纹生成一个容器。

<md-radio-button> 是父元素，_md-container 是您要修改的子元素。

Here's a fork of the plunker 修改后的样式：

md-radio-button ._md-container {
    top: 0;
    transform: translateY(0);
}

希望对您有所帮助！

Answer 2

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

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

mat-radio-button .mat-radio-label {
    align-items: normal;
}

实例：https://stackblitz.com/edit/angular-qkjhrz?embed=1&file=styles.css

Answer 3

稍微改进@athlan 的回答...

最好只在单选按钮元素上设置垂直对齐方式，而不是在标签上也设置垂直对齐方式，否则 non-wrapping 标签不会正确对齐。

此外，我还使用了一个额外的 class 选择器来 opt-in 此行为：(sass)

.mat-radio-button.wrapping-radio-button {
  & .mat-radio-container {
    align-self: normal;
  }

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

在模板中...

<mat-radio-button class="wrapping-radio-button">

如何为Angular Material的mdRadioButton指令设置与文本相关的垂直对齐方式？

How to set vertical alignment for mdRadioButton directive of Angular Material related to text?

html

css

material-design

angular-material