Question 212190 in CSS Question posted in
Some basic documentation can be found here.

Css – MudBlazor: How can I align a MudIcon so that it aligns with a MudText?

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.

?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search