如何为与文本相关的 Angular Material 的 mdRadioButton 指令设置垂直对齐方式? [英] How to set vertical alignment for mdRadioButton directive of Angular Material related to text?

问题描述

如何为与文本相关的Angular Material的mdRadioButton指令设置垂直对齐?我已经尝试了 layout-align 和 vertical-align 样式，但是，单选按钮总是与文本相关的居中对齐.

How to set vertical alignment for mdRadioButton directive of Angular Material related to text? I have tried both layout-align and vertical-align style but, the radio button is always align middle related to the text.

这里是plunker

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

推荐答案

Angular Material 实际上为单选按钮的开/关状态和波纹生成了一个容器.

Angular Material actually generates a container for the radio button's on/off state and ripple.

是父元素，_md-container 是要修改的子元素.

<md-radio-button> is the parent and _md-container is the child element you want to modify.

这是 plunker 的一个分支，带有修改后的样式:

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

希望这有帮助！

这篇关于如何为与文本相关的 Angular Material 的 mdRadioButton 指令设置垂直对齐方式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！