如何在Angular Fluent-UI下拉菜单中居中对齐文本元素？

直接给<fluent-select>和<fluent-option>添加text-align属性无效，是因为Fluent UI组件内部会渲染独立的DOM结构承载文本，组件本身的样式无法穿透到内部元素。需要针对组件内部的文本容器元素设置样式，结合Angular的样式机制实现居中：

方案1：组件内样式（使用::ng-deep穿透样式隔离） #

/* 选中项文本居中 */
:host ::ng-deep .fluent-select .fluent-select__trigger-text {
  text-align: center;
  width: 100%;
}

/* 下拉选项文本居中 */
:host ::ng-deep .fluent-option .fluent-option__content {
  text-align: center;
  justify-content: center;
}

方案2：全局样式文件（无需穿透） #

将以下样式放到项目全局样式文件（如styles.css）中：

.fluent-select .fluent-select__trigger-text {
  text-align: center;
  width: 100%;
}

.fluent-option .fluent-option__content {
  text-align: center;
  justify-content: center;
}

关键说明 #

• fluent-select__trigger-text是<fluent-select>内部承载选中文本的容器元素
• fluent-option__content是<fluent-option>内部承载选项文本的容器元素
• 设置width: 100%确保文本容器占满组件宽度，text-align: center实现水平居中；若选项内部为flex布局，justify-content: center可辅助完成居中对齐

内容的提问来源于stack exchange，提问作者Sam