In this StackBlitz我有一个包含div的Angular Dialog Kendo。我需要在对话区域中垂直/水平居中潜水。这怎么可能?我尝试使用"margin: auto"
但没有奏效。
@Component({
selector: 'my-app',
template: `
<kendo-dialog [width]="340" [height]="200">
<kendo-dialog-titlebar>
The Title
</kendo-dialog-titlebar>
<div id="div1">CENTER THE DIV</div>
</kendo-dialog>
`,
styles: [`
#div1{
width:120px;
height: 40px;
background-color: yellow;
}
`]
})
export class AppComponent {
public opened: boolean = true;
}
基于this thread reply,并适应Dialog内容的上下文:
encapsulation: ViewEncapsulation.None,
styles: [`
#div1{
margin: auto auto;
width:100px;
height: 40px;
background-color: yellow;
}
.k-content.k-dialog-content {
display: flex;
}
`]