角材工具栏无法居中

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

如果我正确理解了您的问题，则希望将中间图像居中放置在屏幕本身的中间。

我注意到您的左图使用位置：相对，因此它在显示内容时会推送内容，将其更改为绝对值将解决此问题，但是当屏幕变小时，您的图像将开始相互攀爬。

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

   /* changed values */
   position: absolute;
}

如果您希望将其完美居中，则还需要执行与右侧图标类似的操作。

或者，您也可以只拍摄中间图像，并为其赋予绝对位置。

Answer 2

为此，您应该使用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布局添加到您的dom（方向默认行）中。 fxLayoutAlign将指定方向的对齐方式。对于行，是水平垂直顺序（中心之间的空间）。

Answer 3

对于这样的事情，我总是使用标准的<table> html。始终有效，编码时间为零。