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

Question

我知道这个问题经常被问到，但是我经历了所有可用的答案，但没有一个对我有用。

我在这里有一个有效的Codepen：https://codepen.io/anon/pen/WPzGrO

我正在尝试将FA图标对准文本段落旁边。因此，图标应位于段落的中间。当段落分成两行或更多行时，图标会显示在底部，如您在密码笔中看到的那样。

booking或 id | id_guest | id_room | reserved | guests | check_in | check_out | checked_in | checked_out | cancelled | base_price | taxes_percentage | taxes_value | total_price | locator | pin | status | meal_plan | additional_services | uuid | deleted ----+----------+---------+---------------------+--------+------------+------------+------------+-------------+-----------+------------+------------------+-------------+-------------+---------+------+-----------+-----------------+---------------------+--------------------------------------+--------- 1 | 1 | 1 | 2016-12-25 17:00:04 | 2 | 2017-05-05 | 2017-05-09 | | | | 200 | 10 | 20 | 220 | AAAAA | 1234 | Confirmed | BedAndBreakfast | "PoolKit"=>"1" | 4df783c9-9375-47d6-8a9d-3309aa2c0a10 | 2 | 2 | 2 | 2016-12-26 09:03:54 | 3 | 2017-04-01 | 2017-04-11 | | | | 500 | 10 | 50 | 550 | AAAAB | 1234 | Confirmed | BedAndBreakfast | "PoolKit"=>"1" | 0428692a-267a-46e7-871f-a7a20c8e9406 | 3 | 3 | 3 | 2016-01-25 14:43:00 | 3 | 2017-06-02 | 2017-06-12 | | | | 500 | 10 | 50 | 550 | AAAAC | 1234 | Confirmed | BedAndBreakfast | "PoolKit"=>"1" | 12deeb14-1568-4b70-9247-5df2df433359 | 4 | 4 | 4 | 2016-01-25 14:43:00 | 3 | 2017-06-01 | 2017-06-10 | | | | 500 | 10 | 50 | 550 | AAAAD | 1234 | Confirmed | BedAndBreakfast | "PoolKit"=>"1" | b3453b07-5ec7-4c15-be72-998e451998c6 | 5 | 5 | 5 | 2016-01-25 14:43:00 | 3 | 2017-06-08 | 2017-06-18 | | | | 500 | 10 | 50 | 550 | AAAAE | 1234 | Confirmed | BedAndBreakfast | "PoolKit"=>"1" | 02a5c8f8-1d4c-45d6-9698-50bfa6d47b42 | 属性在这里似乎没有任何作用。

我该如何解决？

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;
}