對齊文本的中間，用圖標在線

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>

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>