CODEWITHSUNDEEP
htmlcss
Davidaj
Davidaj

Reputation: 235

Align text in the middle, inline with icon

Can't seem to get my piece of text to align with the check icon, Any help please and thanks

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

Upvotes: 0

Views: 47

Answers (2)

Dirk Jan
Dirk Jan

Reputation: 2469

Set the i inside the p. Then apply vertical-align: middle; to the p.

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

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115098

The default alignment of inline elements is baseline so we need to reset the vertical-align property to something more appropriate.

.fa {
  vertical-align: middle;
}

Should do it.

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

Upvotes: 1

Related Questions