MudBlazor: 如何使 MudIcon 与 MudText 对齐？

huangapple
go评论132阅读模式
英文:

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.

{
  &lt;CardHeaderContent&gt;
     &lt;MudText Typo=&quot;Typo.h6&quot; Align=&quot;Align.Center&quot;&gt;
       &lt;MudIcon Icon=&quot;@Icons.Material.Filled.Business&quot; Title=&quot;Favorite&quot; /&gt; Company Details
      &lt;/MudText&gt;
  &lt;/CardHeaderContent&gt;
}

The above icon doens't align with the text.

?

答案1

得分: 1

我弄清楚了：

&lt;CardHeaderContent&gt;
    &lt;div class=&quot;d-flex justify-center align-center&quot;&gt;
        &lt;MudIcon Icon=&quot;@Icons.Material.Filled.Business&quot; Title=&quot;Favorite&quot; /&gt;
        &lt;MudText Typo=&quot;Typo.h6&quot;&gt; 公司详情&lt;/MudText&gt;
    &lt;/div&gt;
&lt;/CardHeaderContent&gt;

我将内容包装在一个 div 中，并添加了 d-flex 和 align-center。justify-center 只是用来将文本居中在容器中，不需要用来对齐图标和文本。

英文:

I figgured this out:

      &lt;CardHeaderContent&gt;
        &lt;div class=&quot;d-flex justify-center align-center&quot;&gt;
          &lt;MudIcon Icon=&quot;@Icons.Material.Filled.Business&quot; Title=&quot;Favorite&quot; /&gt;
          &lt;MudText Typo=&quot;Typo.h6&quot;&gt; Company Details&lt;/MudText&gt;
        &lt;/div&gt;
      &lt;/CardHeaderContent&gt;

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.

&lt;CardHeaderContent&gt;
    &lt;MudText Typo=&quot;Typo.h6&quot; Class=&quot;d-flex align-center justify-center&quot;&gt;
        &lt;MudIcon Icon=&quot;@Icons.Material.Filled.Business&quot; Title=&quot;Favorite&quot; /&gt; Company Details
    &lt;/MudText&gt;
&lt;/CardHeaderContent&gt;

huangapple
  • 本文由 发表于 2023年7月20日 13:14:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/76726848.html
  • css
  • mudblazor
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定