Html Mat-icon 不在其 div 中居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49657545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mat-icon does not center in its div
提问by Mike Me
I am very new to css and I cannot align the mat-icon (the thought bubble) to the div class=img (the green square on the left) - see the attached image. At this moment the icon is a little bit near the top
我对 css 很陌生，我无法将 mat-icon（思想泡泡）与 div class=img（左侧的绿色方块）对齐 - 请参阅附图。此时图标有点靠近顶部
For adding the svg icon I used Material Angular - MatIconRegistry class (don't know if it matters)
为了添加 svg 图标，我使用了 Material Angular - MatIconRegistry 类（不知道是否重要）
My result:
我的结果：
Here is my html:
这是我的 html：
<div class="container">
<div class="img"><mat-icon svgIcon="info"></mat-icon></div>
Some text here!
</div>
Here is my css:
这是我的CSS：
$conainer-min-width: 256px !default;
$conainer-max-width: 512px !default;
$conainer-height: 50px !default;
div.container {
max-width: $container-max-width;
min-width: $container-min-width;
height: $container-height;
margin: auto;
color: #000000;
background-color: #ffffff;
line-height: $container-height;
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: $container-height;
height: $container-height;
float: left;
display: block;
margin: 0 auto;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #9e9e9e;
line-height: $container-height;
justify-content: center;
background-color: #3f9c35;
}
Any thoughts on how to fix this?
关于如何解决这个问题的任何想法？
回答by The.Bear
You need to add vertical alignto the mat-iconelement or .mat-iconclass:
您需要添加vertical align到mat-icon元素或.mat-icon类：
To override all material icons:Stackblitz
覆盖所有材质图标：Stackblitz
.mat-icon {
vertical-align: middle;
}
With FLEX:Stackblitz
使用 FLEX：Stackblitz
CSS:
CSS：
.icon-text {
display: flex;
align-items: center;
}
HTML:
HTML：
<div class="icon-text">
<mat-icon>home</mat-icon>
<span>Some text here 1</span>
</div>
To style a particular material icon with utility class:Stackblitz
使用实用程序类设置特定材质图标的样式：Stackblitz
In some global css file:
在一些全局 css 文件中：
.v-align-middle {
vertical-align: middle;
}
HTML:
HTML：
<div>
<mat-icon class="v-align-middle">home</mat-icon>
<span class="v-align-middle">Some text here 1</span>
</div>
** some css frameworks already have classes like this, eg: bootstrap 4**
**一些 css 框架已经有这样的类，例如：bootstrap 4**
To style a particular material icon:Stackblitz
设置特定材质图标的样式：Stackblitz
CSS:
CSS：
.custom-class mat-icon {
vertical-align: middle;
}
/** or using the class .mat-icon */
.custom-class .mat-icon {
vertical-align: middle;
}
HTML:
HTML：
<div class="custom-class">
<mat-icon>home</mat-icon>
<span>Some text here 1</span>
</div>
回答by A. U.
I believe your problem is typo on these variable names:
我相信你的问题是这些变量名的拼写错误：
$conainer-min-width: 256px !default;
$conainer-max-width: 512px !default;
$conainer-height: 50px !default;
$conainer-min-width: 256px !default;
$conainer-max-width: 512px !default;
$conainer-height: 50px !default;
which doesn't match the variables used here:
这与此处使用的变量不匹配：
div.container {
max-width: $container-max-width;
min-width: $container-min-width;
height: $container-height; }
div.container {
max-width: $container-max-width;
最小宽度：$容器最小宽度；
高度：$容器高度；}
I think it should work once you change conainerto container:)
我认为一旦您更改conainer为它应该可以工作container:)
回答by Novak254
You can use the flex Layout to align the icon
您可以使用 flex Layout 来对齐图标
<div fxLayout="row" fxLayoutAlign="center">
<mat-icon fxFlexAlign="center">supervisor_account</mat-icon>
</div>
Read more about flexLayout in the documentation, fxLayout row is the same as:
在文档中阅读有关 flexLayout 的更多信息，fxLayout 行与：
div {
display:flex;
flex-direction:row;
justify-content:center; /* For fxLayoutAlign="center" */
}
Then you further align the flex item to center i.e fxFlexAlign="center"
然后你进一步将弹性项目对齐到中心即 fxFlexAlign="center"
mat-icon {
display:flex;
align-self:center;
}
