Question 212905 in Html Question posted in
Some basic documentation can be found here.

Html – Center icon inside div with label css

I have this span within div

<div>
  <span class="material-symbols-outlined" (click)="call()">
           phone
         </span>
  <span> Phone</span>
</div>

the phone icon is not center align with the text phone

I tried text-align :center also but is is not working, this div has some outer div also if I give margin-top to icon it shifting whole row

Tags:

2

Answers


  1. 0

    You can use flex to align these two spans:

    <div style="display:flex; align-items:center">
  <span class="material-symbols-outlined" (click)="call()">
    phone
  </span>
  <span> Phone</span>
</div>

    You can write the style separately instead of inline CSS.

    Login or Signup to reply.
  2. 0

    You can use flex property to align this. This property sets how a flex item will grow or shrink to fit the space available in its flex container. Note: If the element is not a flexible item, the flex property has no effect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search