CSS - 文本的段落对齐字体真棒图标

Question

我知道这个问题被问相当频繁，但我经历了所有可用的答案，去和他们没有为我工作。

我有一个在这里工作codepen：https://codepen.io/anon/pen/WPzGrO

我试图对准FA图标旁边的文本的段落。所以图标应该是在段落的中间。当对分解成2行以上时，图标将出现在底部，你可以在codepen看到。

在vertical-align: middle;或line-heigh财产似乎并没有在这里做任何事情。

我怎样才能解决这个问题？

Answer 1

取出vertical-align，line-height和height规则，并添加以下内容：

#menu-list p::after {
  …
  transform: translateY(-50%);
  top: 50%;   
}

#menu-list {
  background: #eee;
  padding: 50px 100px;
}

#menu-list p {
  position: relative;
  padding-left: 40px;
  text-align: left;
}

#menu-list p::after {
  content: '\f058';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  font-size: 32px;
  color: #599FF8;  
  width: 32px;
  transform: translateY(-50%);
  top: 50%;
}

<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>

<div id="menu-list"> 
  <p>This is the longest text that will stack into few lines</p>
  <p>This one will make 2 lines</p>
  <p>And a single line</p>
</div>

Answer 2

更改波纹管CSS代码，希望将工作。

#menu-list p::after {
  content: '\f058';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top:0;
  font-size: 30px;
  line-height:25px;
  color: #599FF8;
}