居中 Angular Material 图标的中心
Center the center of an Angular Material icon
我正在尝试将 Angular Material 图标置于矩形中心:
如图所示,图标(或多或少)居中;然而,它实际上有点偏离中心。我认为(但无法证明)发生的事情是图标的边缘居中(而不是图标的中心居中),这使图标看起来“偏离中心”。我希望能够使图标居中,但到目前为止我找到的所有参考资料都是如何使整个图标居中(这就是我已经在做的)。
我想做的一件事是计算代码中某处的绝对(或相对)位置,但如果可以避免的话,我强烈希望不要这样做,因为这似乎是一种“脆弱”且劳动密集型的方式。
我的模板如下:
<div
class="rectangle"
(click)="clicked(item)"
[style.backgroundColor]="item.color"
*ngIf="item.itemType == allEnumTypes.ClickButton"
title="{{ item.warning }}"
>
<mat-icon
*ngIf="item.icon"
fontIcon="{{ item.icon }}"
[style.color]="item.iconColor"
class="large-icon"
style="padding-top: 20%; padding-right: 30%"
></mat-icon><br /><br />
<span class="select-button-text" [style.color]="item.fontColor" style="padding-bottom: 0%">{{ item.display }}</span>
</div>
矩形 class 的 CSS 是:
.rectangle {
width: 139px;
height: 125px;
border: 2px solid #bfc0c2;
opacity: 1;
text-align: center !important;
background: #ffffff 0% 0% no-repeat padding-box;
}
有人可以在这里指出我的错误吗?
我喜欢用css-flex居中
.center{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
如果你的矩形是
.rectangle {
width: 139px;
height: 125px;
border: 2px solid #bfc0c2;
}
你可以做到
<div class="center rectangle">
<!--see that the margin-top is equal to the line-height-->
<div class="center" style="margin-top:1.25rem">
<mat-icon
aria-hidden="false"
style="font-size: 3rem;width:3rem;height:3rem"
aria-label="Example home icon"
>home</mat-icon
>
<div style="line-height: 1.25rem">Home</div>
</div>
</div>
或者如果你想将组图标和标签居中
<div class="center rectangle">
<mat-icon
aria-hidden="false"
style="font-size: 3rem;width:3rem;height:3rem"
aria-label="Example home icon"
>home</mat-icon
>
<div style="line-height: 1.25rem">Home</div>
</div>
注意:要更改垫子图标的大小,您应该更改字体大小、宽度和高度
我正在尝试将 Angular Material 图标置于矩形中心:
如图所示,图标(或多或少)居中;然而,它实际上有点偏离中心。我认为(但无法证明)发生的事情是图标的边缘居中(而不是图标的中心居中),这使图标看起来“偏离中心”。我希望能够使图标居中,但到目前为止我找到的所有参考资料都是如何使整个图标居中(这就是我已经在做的)。
我想做的一件事是计算代码中某处的绝对(或相对)位置,但如果可以避免的话,我强烈希望不要这样做,因为这似乎是一种“脆弱”且劳动密集型的方式。
我的模板如下:
<div
class="rectangle"
(click)="clicked(item)"
[style.backgroundColor]="item.color"
*ngIf="item.itemType == allEnumTypes.ClickButton"
title="{{ item.warning }}"
>
<mat-icon
*ngIf="item.icon"
fontIcon="{{ item.icon }}"
[style.color]="item.iconColor"
class="large-icon"
style="padding-top: 20%; padding-right: 30%"
></mat-icon><br /><br />
<span class="select-button-text" [style.color]="item.fontColor" style="padding-bottom: 0%">{{ item.display }}</span>
</div>
矩形 class 的 CSS 是:
.rectangle {
width: 139px;
height: 125px;
border: 2px solid #bfc0c2;
opacity: 1;
text-align: center !important;
background: #ffffff 0% 0% no-repeat padding-box;
}
有人可以在这里指出我的错误吗?
我喜欢用css-flex居中
.center{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
如果你的矩形是
.rectangle {
width: 139px;
height: 125px;
border: 2px solid #bfc0c2;
}
你可以做到
<div class="center rectangle">
<!--see that the margin-top is equal to the line-height-->
<div class="center" style="margin-top:1.25rem">
<mat-icon
aria-hidden="false"
style="font-size: 3rem;width:3rem;height:3rem"
aria-label="Example home icon"
>home</mat-icon
>
<div style="line-height: 1.25rem">Home</div>
</div>
</div>
或者如果你想将组图标和标签居中
<div class="center rectangle">
<mat-icon
aria-hidden="false"
style="font-size: 3rem;width:3rem;height:3rem"
aria-label="Example home icon"
>home</mat-icon
>
<div style="line-height: 1.25rem">Home</div>
</div>
注意:要更改垫子图标的大小,您应该更改字体大小、宽度和高度