CSS

Question

我知道这个问题经常被问到，但我浏览了所有可用的答案，none 对我有用。

我这里有一个可用的代码笔：https://codepen.io/anon/pen/WPzGrO

我正在尝试对齐文本段落旁边的 FA 图标。所以图标应该在段落的中间。当 para 分成 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;
}

CSS - 将 Font Awesome 图标与一段文字对齐

CSS - Align Font Awesome icon with a paragraph of text

html

alignment

css-selectors

vertical-alignment