对于 MudBlazor 组件 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>

有谁知道如何将这个组件的选定值居中对齐？我已经通读了the API documentation，但我仍然不明白该怎么做（而且我的CCS技能有限）。

Answer 1

添加一个 CSS class 以 MudSelect 组件内的 input 标记为目标，并通过那里分配文本对齐方式。

例子

这是您的代码的修改版本：

<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

对于 MudBlazor 组件 MudSelect，如何让选定的值居中对齐？

For MudBlazor component MudSelect, how do I get selected value to align in the center?

css

blazor-server-side

.net-6.0

mudblazor

例子