对齐字体真棒图标和一个段落

Question

我好像无法让绿色“v”标记图标与段落在同一行。 “v”总是在它上面。它开始于我在段落和图标之间使用 flex 或 grid 来 space 我试过证明内容，对齐顶部填充的项目没有任何改变。有人知道如何解决这个问题吗？

  <style>
.content {
background: #3494db;
color: #fff;
width: 65%;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
}
.column1{
  color: black;
  line-height: 15px;
text-align: right;
margin-top: 5px;
margin-bottom: 10px;
padding-right: 25px;
}
.column2{
color: black;
line-height: 15px;
text-align: right;
margin-top: 5px;
margin-bottom: 10px;
padding-right: 25px;
}
.column1 i {
display: flex;
justify-content: space-between;
margin-left: 10px;
}
.column2 i {
display: flex;
justify-content: space-between;
margin-left: 10px;
}
.column1 p{
border-bottom: 1px #fff solid;
}
.column2 p{
border-bottom: 1px #fff solid;
}
.content i{
color: rgb(50, 230, 50);
font-size: 18px;
}
</style>


</head>
<body>
  <div class="content"> 
       
    <div class="column1">
          <p><i class="far fa-check-circle"></i> Free for all</p>
    </div>
    
    <div class="column2">
      <p> <i class="far fa-check-circle"></i> Free for all</p>
    </div>
</div>


</body>
</html>

Answer 1

我没有显示第 1 列和第 2 列：flex；将其更改为显示；漂浮;然后在两者上都放 float: left;

这将使它们与段落对齐，但白色下划线穿过复选标记。为了解决这个问题，我在 column1 p 和 column2 p 中添加了 5px of padding-bottom。我的 CSS 这 4 类看起来像这样：

        .column1 i {
           display: float;
           justify-content: space-between;
           margin-left: 10px;
           float: left;
           }
        .column2 i {
           display: float;
           justify-content: space-between;
           margin-left: 10px;
           float: left;
           }
       .column1 p{
           border-bottom: 1px #fff solid;
           padding-bottom: 5px;
           }
       .column2 p{
           border-bottom: 1px #fff solid;
           padding-bottom: 5px;
           }

如果这就是您要找的，请告诉我！

对齐字体真棒图标和一个段落

align font awesome icon and a pragraph

html

css

alignment

font-awesome

centering