对齐字体真棒图标和pragraph

问题描述

似乎我无法使绿色的“ v”标记图标与段落位于同一行。 “ v”始终在其上方。当我使用flex或grid在段落和图标之间间隔时开始我尝试证明内容合理，对齐填充顶部的项目没有任何改变。有人知道如何解决这个问题吗？

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

解决方法

不是显示column1 i和column 2 i而是显示：flex;更改为显示；浮动;然后都放上float：left;

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

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

让我知道这是否是您想要的！

alignment centering font-awesome html

对齐字体真棒图标和pragraph

问题描述

解决方法

相关问答