我试图将自定义svg图标居中,但我不能这样做,虽然相同的CSS适用于官方材料设计图标(我添加了浅绿色背景,因此更容易看到框架的位置) .
在最左边's the custom svg I added, and next to it, on the right, it'是官方的:
我的css:
div.container {
max-width: 512px;
min-width: 256px;
height: 50px;
margin: auto;
color: #000000;
background-color: #ffffff;
line-height: 50px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-width: 1px;
border-style: solid;
border-color: #9e9e9e;
padding-right: 20px;
position: fixed;
z-index: 1000;
left: 0;
right: 0;
top: 30px;
}
div.img {
width: 50px;
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #9e9e9e;
background-color: #3f9c35;
}
div.img mat-icon {
vertical-align: middle;
background-color: aqua;
}
我的HTML
<div class="container">
<div class="img">
<mat-icon svgIcon="information">info</mat-icon>
</div>
<div class="img">
<mat-icon>home</mat-icon>
</div>
Some text here!
</div>
请在this repo中找到代码 .
有关如何将自定义svg图标集中在官方Material Design中的任何建议吗?
此外,如果你可以建议一个我可以将它连接到repo的平台,任何人都可以运行它,这样就可以更容易地共享代码并同时运行它 . 大多数平台都不允许我上传资产 .