我試著在我的有角度的fluent-UI下拉菜單中居中對齊文本元素。我已經嘗試使用文本對齊和文本對齊最后，但沒有運氣。

下面是CSS:

.fluent-select {
  text-align-last: center;
  text-align: center;
  min-width: 0;
  flex: 1;
}

.fluent-select-option {
  text-align: center;
  text-align-last: center;
}

以下是HTML:

<fluent-select
  title="Please select here"
  [(ngModel)]="mySelection"
  (ngModelChange)="executeSelection()"
  name="myChoice"
  class="fluent-select"
  ngDefaultControl
>
  <fluent-option class="fluent-select-option">{{ mySelection }}</fluent-option>
  <fluent-option
    *ngFor="let choice of choices; let i = index"
    [value]="choice.path"
  >{{ choice.title }}</fluent-option>
</fluent-select>

我已經嘗試使用CSS屬性text-align: center和text-align-last: center，但是無論我怎么嘗試，文本總是靠左對齊。

流暢的UI組件有自己的CSS規則和樣式。因此，應用常規CSS屬性(如text-align和text-align-last)可能不會像預期的那樣工作。相反，您可以使用Fluent UI下拉組件提供的特定樣式選項

要居中對齊Fluent UI下拉列表中的文本元素，您可以直接修改Fluent UI組件的樣式，如。

.fluent-select-option .ms-Button-flexContainer {
  justify-content: center;
}

希望對你有幫助..

或者

fluent-option {
   display: flex;
   justify-content: center;
}

https://stackblitz.com/edit/fluent-select-example-hss8ie?文件=index.ts，index.html

是否也要設置下拉選擇按鈕的樣式？

問題是我用了。fluent-select-option代替fluent-option(無點)。下面是我的工作代碼現在的樣子:

.fluent-select {
  text-align-last: center;
  text-align: center;
  min-width: 0;
  flex: 1;
}

fluent-option {
  display: block;
  text-align: center; 
}