html - 在中间对齐文本，与图标内联

Question

似乎无法让我的文本与复选图标对齐，请提供任何帮助，谢谢

<div class="col-md-12" style="background: #d9232a; padding: 20px;">
              <div><i class="fa fa-check-square fa-2x"></i><p style="display: inline;"> Fully Sculptured</p></br></div>
              <div><i class="fa fa-check-square fa-2x"></i><p style="display: inline;"> 40mm Triple Glazing</p></br></div>
              <div><i class="fa fa-check-square fa-2x"></i><p style="display: inline;"> PAS 23 & 24 Approved</p></br></div>
              <div><i class="fa fa-check-square fa-2x"></i><p style="display: inline;"> Highly Security Options</p></br></div>      
</div>

Answer 1

内联元素的默认对齐方式是baseline，因此我们需要将vertical-align属性重置为更合适的值。

.fa {
  vertical-align: middle;
}

应该这样做。

.fa {
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12" style="background: #d9232a; padding: 20px;">
  <div><i class="fa fa-check-square fa-2x"></i>
    <p style="display: inline;">Fully Sculptured</p>
    </br>
  </div>
  <div><i class="fa fa-check-square fa-2x"></i>
    <p style="display: inline;">40mm Triple Glazing</p>
    </br>
  </div>
  <div><i class="fa fa-check-square fa-2x"></i>
    <p style="display: inline;">PAS 23 & 24 Approved</p>
    </br>
  </div>
  <div><i class="fa fa-check-square fa-2x"></i>
    <p style="display: inline;">Highly Security Options</p>
    </br>
  </div>
</div>