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

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

两者都是并排显示的内联块，但我在垂直移动图标而不破坏相邻布局时遇到问题

我曾尝试将图标包装在div、span中，并尝试使其容器相对/绝对定位，但似乎无法使其正常工作

我的项目的简化示例：

html

举例说明问题的代码笔

---

在本例中，我尝试将图标向下移动6px，但您可以将

显示：flex

添加到

。卡片标题
，而不是同时移动p和图标。需要从
图标保持架中卸下
填充顶部：6px


了解更多关于CSS灵活框的信息


。卡片标题{
显示：-webkit flex；
显示：-moz flex；
显示器：flex；
-webkit对齐项目：居中；
-moz对齐项目：居中；
对齐项目：居中；
}
.卡片标题p..卡片标题.图标支架{
显示：内联块；
}


我的头衔

照相机
您可以将
显示：flex
添加到
.card heading
。需要从
图标保持架中卸下
填充顶部：6px


了解更多关于CSS灵活框的信息


。卡片标题{
显示：-webkit flex；
显示：-moz flex；
显示器：flex；
-webkit对齐项目：居中；
-moz对齐项目：居中；
对齐项目：居中；
}
.卡片标题p..卡片标题.图标支架{
显示：内联块；
}


我的头衔

照相机
使用
垂直对齐
将图标居中


。卡片标题p{
显示：内联块；
}
.卡片标题.图标支架{
显示：内联块；
垂直对齐：中间对齐；
}


我的头衔

照相机
使用
垂直对齐
将图标居中


。卡片标题p{
显示：内联块；
}
.卡片标题.图标支架{
显示：内联块；
垂直对齐：中间对齐；
}


我的头衔

照相机
哈哈，谢谢你。。。我一直忘了，每当我遇到css问题时，我都应该尝试flex解决方案：）哈哈，太棒了，谢谢你。。。我一直忘了，每当遇到css问题时，我都应该尝试flex解决方案：）我不知道
垂直对齐
在
内联块
上工作，只是本能地尝试了一下。但我不确定旧的浏览器是否支持它。我不知道
垂直对齐
可以在
内联块
上工作，只是本能地尝试了一下。但我不确定旧的浏览器是否支持它。
<div class="card-heading">
  <p>
    my title
  </p>
  <div class="icon-holder">
    <i class="material-icons">camera</i>
  </div>
</div>

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

  .icon-holder {
    display: inline-block;

    i {
      padding-top: 6px;
    }
  }
}