angular панель инструментов материала не может центрироваться

Question

Я пытаюсь центрировать значок на панели инструментов материала. К сожалению, он немного сместился вправо, потому что у меня есть второе изображение на стороне лефтера. Вот мой код:

<mat-toolbar color="primary">
<mat-toolbar-row>
  <span>
    <img class="premiumPartner" src="https://resources.redbull.com/logos/redbullcom/v1/redbullcom-logo.svg">
  </span>
  <span class="span">
    <img class="logo" src="../assets/eatsmarticon.png">
  </span>
 <span class="example-spacer"></span>
 <mat-icon class="example-icon" aria-hidden="false" aria-label="Example heart icon">tune</mat-icon>

и вот мой стиль:

.logo{
 height: 56px;
 width: 56px;
 vertical-align: middle;

 }
.premiumPartner{
height: 30px;
position: relative;
vertical-align: middle;
 }

 .span {
margin: auto;

}

К сожалению, это выглядит так:

Answer 1

Для этого вы должны использовать FlexLayout: https://www.npmjs.com/package/@angular / flex-layout

Вот пример того, как это работает:

<mat-toolbar color="primary">
  <mat-toolbar-row fxLayout fxLayoutAlign="space-between center>
    <img class="premiumPartner" src="https://resources.redbull.com/logos/redbullcom/v1/redbullcom-logo.svg">
    <img class="logo" src="../assets/eatsmarticon.png">
    <mat-icon class="example-icon" aria-hidden="false" aria-label="Example heart icon">tune</mat-icon>
  </mat-toolbar-row>
</mat-toolbar>

fxLayout будет добавьте Flex Layout к вашему домену (направление по умолчанию). FxLayoutAlign будет указывать выравнивание направления. Для строки это порядок горизонтальной вертикали (пробел между центрами).

Answer 2

Я всегда использую стандартные <table> html для подобных вещей. всегда работает, ноль затраченного времени на кодирование.

Answer 3

Если я правильно понял ваш вопрос, вы sh центрируете среднее изображение по центру экрана .

Я заметил, что ваше левое изображение использует положение: относительное, поэтому он выталкивает контент при отображении, если изменить его на абсолютный, это решит эту проблему, но ваши изображения начнут подниматься друг на друга, когда экран станет меньше.

.premiumPartner {
   height: 30px;
   vertical-align: middle;

   /* changed values */
   position: absolute;
}

Вам нужно будет сделать что-то подобное на значок справа, если вы sh отцентрируете его идеально.

Или вы можете просто взять среднее изображение и присвоить ему абсолютную позицию.