homerboy homerboy - 2 months ago 17
CSS Question

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.

Answer

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