对于MudBrazor组件MudSelect，如何使选定的值在中心对齐

Question

我有一个非常简单的下拉列表，一个MudSelect，它运行良好。当你列出选项时，它们在中间对齐，但我不知道如何使选定的值在在中间对齐。如果我在MudSelect本身上设置Style="text-align: center"，则选定的值仍然向左对齐。这在宽设备上看起来不太好。

<MudSelect @bind-Value="NumberOfRounds" T="int" Variant="Variant.Outlined" AnchorOrigin="Origin.CenterCenter">
<MudSelectItem T="int" Value="1" Style="text-align: center"/>
<MudSelectItem T="int" Value="2" Style="text-align: center"/>
<MudSelectItem T="int" Value="3" Style="text-align: center"/>
<MudSelectItem T="int" Value="4" Style="text-align: center"/>
<MudSelectItem T="int" Value="5" Style="text-align: center"/>
<MudSelectItem T="int" Value="6" Style="text-align: center"/>
<MudSelectItem T="int" Value="7" Style="text-align: center"/>
<MudSelectItem T="int" Value="8" Style="text-align: center"/>
<MudSelectItem T="int" Value="9" Style="text-align: center"/>
<MudSelectItem T="int" Value="10" Style="text-align: center"/>
</MudSelect>

有人知道如何将该组件的选定值居中对齐吗？我已经通读了API文档，但我仍然不明白如何做到这一点(而且我的CCS技能有限(。

Answer 1

在MudSelect组件中添加一个以input标记为目标的CSS类，并通过它分配文本对齐方式。

示例

这是您代码的修改版本：

<style>
.center-mud-dropdown input {
text-align: center;
}
</style>
<MudSelect class="center-mud-dropdown" @bind-Value="NumberOfRounds" T="int" Variant="Variant.Outlined" AnchorOrigin="Origin.CenterCenter" Style="text-align: center">
<MudSelectItem T="int" Value="1" Style="text-align: center"/>
<MudSelectItem T="int" Value="2" Style="text-align: center"/>
<MudSelectItem T="int" Value="3" Style="text-align: center"/>
<MudSelectItem T="int" Value="4" Style="text-align: center"/>
<MudSelectItem T="int" Value="5" Style="text-align: center"/>
<MudSelectItem T="int" Value="6" Style="text-align: center"/>
<MudSelectItem T="int" Value="7" Style="text-align: center"/>
<MudSelectItem T="int" Value="8" Style="text-align: center"/>
<MudSelectItem T="int" Value="9" Style="text-align: center"/>
<MudSelectItem T="int" Value="10" Style="text-align: center"/>
</MudSelect>
@code {
private int NumberOfRounds { get; set; }
}

https://try.mudblazor.com/snippet/QaGcYIPIhHGGYjhU