Search code examples
cssangularangular-material

Angular material mat-list-item

How to vertically align content in mat-list-item?

In my case it contains:

 `
   <mat-list-item>
      <a>.....</a>
   </mat-list-item>`

I tried this in css

  mat-list-item {
   display: inline-block;
   height: auto;
   width: auto;
   vertical-align: center;
  }
 
  
   a{
    display: flex;
    align-items: center;
   }

but it didn't work.

Solution

  • We can use the below CSS, I use width:100% to make full width and text-align: center to align the text. The parent span I convert to flex, instead of the list item

    CSS:

    .center-align-list {
  mat-list-item .mdc-list-item__content > span {
    display: flex;
    .center-align {
      width: 100%;
      text-align: center;
    }
  }
}

    HTML:

    <mat-list role="list" class="center-align-list">
  <mat-list-item role="listitem"
    ><a class="center-align" href="#">Item 1</a></mat-list-item
  >
  <mat-list-item role="listitem"
    ><a class="center-align" href="#">Item 2</a></mat-list-item
  >
  <mat-list-item role="listitem"
    ><a class="center-align" href="#">Item 3</a></mat-list-item
  >
</mat-list>

    Stackblitz Demo