英文:
MudBlazor: How can I align a MudIcon so that it aligns with a MudText?
问题
在MudBlazor中,使MudIcon与相应的MudText对齐的最清晰方法是:
{
<CardHeaderContent>
<div style="display: flex; align-items: center;">
<MudIcon Icon="@Icons.Material.Filled.Business" Title="Favorite" />
<MudText Typo="Typo.h6" Align="Align.Center">Company Details</MudText>
</div>
</CardHeaderContent>
}
上述图标将与文本对齐。
英文:
In MudBlazor what is the cleanest way to align a MudIcon with some corresponding MudText.
{
<CardHeaderContent>
<MudText Typo="Typo.h6" Align="Align.Center">
<MudIcon Icon="@Icons.Material.Filled.Business" Title="Favorite" /> Company Details
</MudText>
</CardHeaderContent>
}
The above icon doens't align with the text.
?
答案1
得分: 1
我弄清楚了:
<CardHeaderContent>
<div class="d-flex justify-center align-center">
<MudIcon Icon="@Icons.Material.Filled.Business" Title="Favorite" />
<MudText Typo="Typo.h6"> 公司详情</MudText>
</div>
</CardHeaderContent>
我将内容包装在一个 div 中,并添加了 d-flex 和 align-center。justify-center 只是用来将文本居中在容器中,不需要用来对齐图标和文本。
英文:
I figgured this out:
<CardHeaderContent>
<div class="d-flex justify-center align-center">
<MudIcon Icon="@Icons.Material.Filled.Business" Title="Favorite" />
<MudText Typo="Typo.h6"> Company Details</MudText>
</div>
</CardHeaderContent>
I wrapped the content in a div and added d-flex & align-centre. the justify-centre is just to center the text in the container and not needed to align the icon with the text.
答案2
得分: 1
由于您将MudIcon
作为MudText
的子内容,您可以将MudText
转换为flexbox并进行align-center
对齐。
<CardHeaderContent>
<MudText Typo="Typo.h6" Class="d-flex align-center justify-center">
<MudIcon Icon="@Icons.Material.Filled.Business" Title="Favorite" /> 公司详情
</MudText>
</CardHeaderContent>
英文:
As you have the MudIcon
as a child content of MudText
, then you can turn the MudText
into a flexbox and align-center
.
<CardHeaderContent>
<MudText Typo="Typo.h6" Class="d-flex align-center justify-center">
<MudIcon Icon="@Icons.Material.Filled.Business" Title="Favorite" /> Company Details
</MudText>
</CardHeaderContent>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论