我知道我可能在这里遗漏了一些东西.我试图垂直对齐md-icon和一些文本,现在,“示例文本”一词显示在图标下方.
<div> <md-icon>home</md-icon> Sample Text </div>
输出：
我确实尝试使用跨度在示例文本上进行垂直对齐,但无论如何都无法获得任何工作并感觉有点hacky.
有谁知道如何获得这种效果？
解决方法
使用< md-icon>时,这是一个常见问题.要对齐图标和文本,可以将文本放在范围内并将样式应用于：
<div> <md-icon>home</md-icon><span class="aligned-with-icon">Sample Text</span> </div>
在你的component.css中：
.aligned-with-icon{
position: absolute;
margin-top: 5px;
margin-left: 5px; /* optional */
}
如果您要在同一个div中放置多个图标,也可以使用相对位置.这是css：
.aligned-with-icon-relative{
position: relative;
top: -5px;
margin-left: 5px; /* optional */
}
另一种选择是在外部div上使用flex显示,并将items-items设置为center：
在你的HTML中：
<div class="with-icon"> <md-icon>home</md-icon>Sample Text </div>
在你的CSS中：
.with-icon {
display: flex;
align-items: center;
}
这是一个Plunker Demo
