更新的答案（截至2018年12月20日）

Question

我想在下面对话框右上角的对齐按钮是我的HTML

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>

  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

demo

Answer 1

更新的答案（截至2018年12月20日）

我发现align属性用于将flexbox CSS属性添加到对话框组件的SCSS文件中的对话框操作中：

（dialog.scss的摘录）

.mat-dialog-actions {
  // ...
  &[align='end'] {
    justify-content: flex-end;
  }

  &[align='center'] {
    justify-content: center;
  }
}

这里是源代码的行： Lines of SCSS

原始答案

您可以使用[align] HTML属性：

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

Demo

Answer 2

自align属性is not supported in HTML5起，您应该改用以下CSS：

.mat-dialog-actions {
    justify-content: flex-end;
}

这是当您放置align="end"时由Angular Material内部完成的，您可以检查该元素以进行检查。

Answer 3

删除

{display: flex}

类mat-dialog-actions的样式

Answer 4

使用作为材料一部分的内置工具栏。

<h4 mat-dialog-title>
        <mat-toolbar role="toolbar" class="task-header">
            <span> Edit Task</span>
            <span class="fx-spacer"></span>
            <button mat-icon-button (click)="close()">
                <mat-icon mat-list-icon>close</mat-icon>
            </button>
        </mat-toolbar>
    </h4>
    <div mat-dialog-content>
    Modal Content here
    </div>

自定义标题的CSS

.task-header {
    background-color: transparent;
    padding: 0 5px;
    height: 20px;
}
.fx-spacer {
    flex: 1 1 auto;
}

Answer 5

猜猜我来晚了，但还是要来。
您可以使用float样式属性：

  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial style="float: left;">Ok</button>

我使用了内联样式以便于演示
但我不建议为您的项目使用内联样式。
改用单独的样式表

Answer 6

在没有TypeScript的情况下关闭功能和按钮对齐。

HTML：

<button class="button-close" mat-button [mat-dialog-close]="true">X</button>

CSS：

.button-close {
    justify-self: right;
    font-size: 20px;
    border: none;
    height: 30px;
    background-color: #FFFFFF;
    outline: none;
    color: #c04747;
    
    &:hover {
        cursor: pointer;
    }
}

如何在Dialog角度材料内对齐按钮？

6 个答案:

更新的答案（截至2018年12月20日）

原始答案