我試圖將一個 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>
矩形類的 CSS 是：
.rectangle {
width: 139px;
height: 125px;
border: 2px solid #bfc0c2;
opacity: 1;
text-align: center !important;
background: #ffffff 0% 0% no-repeat padding-box;
}
有人可以在這里指出我的錯誤嗎？
uj5u.com熱心網友回復：
我喜歡使用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>
查看堆疊閃電戰
注意：要更改 mat-icon 的大小，您應該更改字體大小、寬度和高度
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/340939.html
上一篇：tsconfig.json中的**/node_modules/*是什么意思？
下一篇：如何從函式的回傳中獲取型別？