Angular-Material2：垂直对齐文本和md-icon以匹配垂直样式？

发布时间：2020-12-17 06:51:58 所属栏目：安全来源：网络整理

导读：我知道我可能在这里遗漏了一些东西.我试图垂直对齐md-icon和一些文本,现在,“示例文本”一词显示在图标下方. div md-iconhome/md-icon Sample Text/div 输出：我确实尝试使用跨度在示例文本上进行垂直对齐,但无论如何都无法获得任何工作并感觉有点hacky. 有

我知道我可能在这里遗漏了一些东西.我试图垂直对齐md-icon和一些文本,现在,“示例文本”一词显示在图标下方.

<div>
  <md-icon>home</md-icon> Sample Text
</div>

输出：

enter image description here

我确实尝试使用跨度在示例文本上进行垂直对齐,但无论如何都无法获得任何工作并感觉有点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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!