[英]Angular-Material2: Align text and md-icon vertically to match vertical style?
I know I am probably missing something here.我知道我可能在这里遗漏了一些东西。 I am trying to align md-icon and some text vertically, right now the word "sample text" displays below the icon.
我正在尝试垂直对齐 md-icon 和一些文本,现在“示例文本”一词显示在图标下方。
<div>
<md-icon>home</md-icon> Sample Text
</div>
Output:输出:
I did try playing around with vertical align on the Sample Text using a span but couldn't get anything working and felt kind of hacky anyway.我确实尝试过使用跨度在示例文本上进行垂直对齐,但无法获得任何工作,并且无论如何都感觉有点笨拙。
Anyone know how to get this effect?有谁知道这个效果怎么弄?
This is a common issue when using <md-icon>
.这是使用
<md-icon>
时的常见问题。 To align the icon and text, you can put your text inside a span and apply style to that:要对齐图标和文本,您可以将文本放在跨度内并对其应用样式:
<div>
<md-icon>home</md-icon><span class="aligned-with-icon">Sample Text</span>
</div>
In your component.css:在你的 component.css 中:
.aligned-with-icon{
position: absolute;
margin-top: 5px;
margin-left: 5px; /* optional */
}
You can also use relative
position if you'll be putting multiple icons in the same div.如果您将多个图标放在同一个 div 中,您也可以使用
relative
位置。 Here is the css for that:这是为此的CSS:
.aligned-with-icon-relative{
position: relative;
top: -5px;
margin-left: 5px; /* optional */
}
Another option is to use flex
display on the outer div and align-items
to center
:另一种选择是在外部 div 上使用
flex
display 并将align-items
到center
:
In your html:在你的 html 中:
<div class="with-icon">
<md-icon>home</md-icon>Sample Text
</div>
In your css:在你的 css 中:
.with-icon {
display: flex;
align-items: center;
}
Here is a Plunker Demo这是一个Plunker演示
I utilize the inline
attribute.我使用
inline
属性。 This will cause the icon to correctly scale with the size of the button.这将导致图标与按钮的大小正确缩放。
<button mat-button>
<mat-icon inline=true>local_movies</mat-icon>
Movies
</button>
<!-- Link button -->
<a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>
I add this to my styles.css
to:我将此添加到我的
styles.css
中:
button.mat-button .mat-icon,
a.mat-button .mat-icon,
a.mat-raised-button .mat-icon,
a.mat-flat-button .mat-icon,
a.mat-stroked-button .mat-icon {
vertical-align: top;
font-size: 1.25em;
}
You can use你可以使用
div {
display: flex;
vertical-align: middle;
}
or或
span {
display: inline-flex;
vertical-align: middle;
}
I must say such a simple thing should automatically work out of the box.我必须说这么简单的事情应该自动开箱即用。 But you can use
position: absolute
to center icon vertically as follow:但是您可以使用
position: absolute
垂直居中图标,如下所示:
You can find a demo here你可以在这里找到演示
button {
/* manually making space for mat-icon because
mat-icon is not position: absolute
*/
padding-left: 30px;
}
::ng-deep .mat-icon{
font-size: 16px !important; /*change this as per your needs*/
position: absolute;
top: 50%;
transform: translate(-22px, -50%);
/*centering image inside mat-icon box*/
display: flex !important;
justify-content: center;
align-items: center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.