CODEWITHSUNDEEP
javascripthtmlcss
patrickhuang94
patrickhuang94

Reputation: 2115

Center font awesome icon in a container div

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.

enter image description here

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

Upvotes: 1

Views: 2946

Answers (2)

Diego Cort&#233;s
Diego Cort&#233;s

Reputation: 425

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

Upvotes: 2

Scott
Scott

Reputation: 21882

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

Upvotes: 6

Related Questions