中心在容器中的字體真棒圖標div

Question

我有一個按鈕有兩個文本和一個字體真棒圖標。這兩個文本應該左對齊，而圖標應該居中對齊。

<div className="overlay"> 
    <span>Unifyed</span><br/> 
    <span style={{fontSize: "14px", textAlign: "left"}}>iOS Developer</span><br/> 
    <span><i className="icon fa fa-plus" /></span> 
</div> 

.overlay { 
    display: inline-block; 
    text-align: left; 
    background: rgba(0, 0, 0, .35); 
    padding-top: 15px; 
    padding-left: 15px; 
} 

由於文本和圖標都包含在overlay，有沒有辦法將它們分配到不同的風格？我試圖將文本和圖標分成兩個不同的類，但由於它是疊加層，因此我需要將這三個屬性放在一個父容器下。

Answer 1

<i>標籤不自閉.... <i class="xxxxx"></i>他們，與跨度以來，始終顯示爲內聯...更改爲inline-block的或塊。

並且避免使用<br />標籤會爲您服務，如果您有史以來需要更新標記。 <br />標籤是邪惡。

.overlay { 
 
    display: inline-block; 
 
    text-align: left; 
 
    background: rgba(0, 0, 0, .35); 
 
    padding-top: 15px; 
 
    padding-left: 15px; 
 
} 
 

 
/* below is added because clearly your CSS here is incomplete */ 
 

 
.overlay { width: 200px; height: 200px; } 
 
span { display: block; }

<div class="overlay"> 
 
    <span>Unifyed</span> 
 
    <span style="fontSize: 14px;">iOS Developer</span> 
 
    <span style="text-align: center;"><i class="icon fa fa-plus"></i></span> 
 
</div> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Answer 2

簡單地只添加圖標到其他分區中的覆蓋股利和APLY文本對齊：中心;

.overlay { 
 
    display: inline-block; 
 
    text-align: left; 
 
    background: rgba(0, 0, 0, .35); 
 
    padding:15px; 
 
} 
 

 
.overlay .icon{ 
 
    text-align:center; 
 
    padding:8px 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="overlay"> 
 
    <span>Unifyed</span><br/> 
 
    <span style={{fontSize: "14px", textAlign: "left"}}>iOS Developer</span><br/> 
 
    <div class="icon"> 
 
     <span><i class="fa fa-plus" aria-hidden="true"></i></span> 
 
    </div> 
 
    
 
</div>