Center Schriftart awesome Symbol in einem Container div

Question

Ich habe einen Button mit zwei Texten und einem Font-awesome Symbol. Die zwei Texte sollten linksbündig sein, während das Symbol zentriert sein sollte.

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

Seit dem Text und das Symbol sind sowohl in overlay enthalten ist, ist es eine Möglichkeit, sie zu verschiedenen Stilen zuweisen? Ich habe versucht, den Text und das Symbol in zwei verschiedene overlay Klassen zu teilen, aber da es ein Overlay ist, müssen alle drei unter einem übergeordneten Container sein.

Answer 1

<i> Tags sind nicht selbstschließend .... <i class="xxxxx"></i> und sie zusammen mit Spannweiten, werden immer als inline angezeigt ... es ändern oder Block-Block Inline.

Und vermeiden Sie die Verwendung von <br /> Tags würde Ihnen gut, wenn Sie jemals brauchen, um die Markup zu aktualisieren. <br /> Tags sind böse.

.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

einfach nur auf das Symbol in andere div innerhalb Overlay div hinzufügen und aply text-align: center;

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