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

应该这样做。

＆＃13;

.fa {
  vertical-align: middle;
}

＆＃13;

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

＆＃13;

Answer 2

在i内设置p。然后将vertical-align: middle;应用于p。

<div><p style="vertical-align: middle; display: inline;"><i class="fa fa-check-square fa-2x"></i> Fully Sculptured</p></br></div>

对齐中间的文本，内嵌图标

2 个答案: