垂直放置在段落文本旁边的材质图标

Question

我有一个p元素，除此之外，我还通过字体方法放置了一个材料图标。

两者都是内联块以并排显示，但我无法在不破坏相邻布局的情况下垂直移动图标。

我尝试将图标包装在div、span 中，并尝试使其容器相对/绝对定位，但似乎无法使其表现良好。

我的项目的简化示例：

.html

<div class="card-heading">
<p>
my title
</p>
<div class="icon-holder">
<i class="material-icons">camera</i>
</div>
</div>

SCSS

.card-heading {
p {
display: inline-block;
}
.icon-holder {
display: inline-block;
i {
padding-top: 6px;
}
}
}

说明问题 https://codepen.io/joshuaohana/pen/dRqgye 的示例代码笔

在这个例子中，我试图将图标向下移动 6px，而不是同时移动 p 和图标

Answer 1

使用vertical-align使图标居中。

.card-heading p {
display: inline-block;
}

.card-heading .icon-holder {
display: inline-block;
vertical-align: middle;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="card-heading">
<p>
my title
</p>
<div class="icon-holder">
<i class="material-icons">camera</i>
</div>
</div>

Answer 2

您可以将display: flex添加到.card-heading。需要从.icon-holder中删除padding-top: 6px。

代码笔在这里。

在此处阅读有关 CSS 弹性框的更多信息

.card-heading {
display: -webkit-flex;
display: -moz-flex;
display: flex;

-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
.card-heading p, .card-heading .icon-holder {
display: inline-block;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="card-heading">
<p>
my title
</p>
<div class="icon-holder">
<i class="material-icons">camera</i>
</div>
</div>