I have a button with two texts and one font-awesome icon. The two texts should be left-aligned, while the icon should be center-aligned.

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

Since the text and the icon are both contained in overlay, is there any way to assign them to different styles? I've tried to divide the text and the icon into two different overlay classes, but since it's an overlay, I need all three of these to be under one parent container.

I have a button with two texts and one font-awesome icon. The two texts should be left-aligned, while the icon should be center-aligned.

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

Since the text and the icon are both contained in overlay, is there any way to assign them to different styles? I've tried to divide the text and the icon into two different overlay classes, but since it's an overlay, I need all three of these to be under one parent container.

• javascript
• html
• css

• are you trying to have each line of text or icon have their own style? If so, you can just assign an id to each and modify their css – davidhu Commented Sep 11, 2016 at 19:48
• I can't apply the styling to each span or i. I need to apply it to the parent container. If I want to center align the icon, I can't just apply it to the icon. – patrickhuang94 Commented Sep 11, 2016 at 19:50

2 Answers 2

<i> tags are not self closing.... <i class="xxxxx"></i> and they, along with spans, are always displayed as inline... change it to inline-block or block.

And avoiding the use of <br /> tags would serve you well if you ever need to update the markup. <br /> tags are evil.

.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 inplete */

.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./font-awesome/4.6.3/css/font-awesome.min.css" />

Simply only add the icon into other div inside overlay div and 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./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>