[Resolved] Centre Aligning Font Awesome

[Rylan Urban]

Hi, no matter what I try – i can’t seem to get the icon center aligned within the column.

Here is using div, p, a, span (i doesn’t work either).

http://jbe.allgreenmarketing.com/#home

What to do!

[David]

Use the style: display: inline-block;

[Rylan Urban]

What’s the actual html?

none of these are working:
<span style="text-align: center;" style="display: inline-block;" class="fa fa-pencil" aria-hidden="true"></span>
<span style="display: inline-block;" class="fa fa-pencil" aria-hidden="true"></span>
<span style="text-align: center;" class="fa fa-pencil" aria-hidden="true"></span>

[Rylan Urban]

Any help would be great – tried everything!

[David]

I would add this inside of the grid container.

<div style="display: inline-block; text-align: center;">
    <i class="fa fa-pencil" aria-hidden="true"></i>
    <p>Here is a line of text</p>
    <p>Here is a line of text</p>
</div>

[Rylan Urban]

That one worked! But only if you ALSO wrap it in a p style…

Here is the only code that would align icon center:

<p style="text-align: center;"><span style="text-align: center; display: inline-block;" class="fa fa-pencil" aria-hidden="true"></span></p>

[David]

Glad to hear you found a solution. I would however suggest you try pasting the code i gave you into one of your grid columns – every element contained within the div will then be centered and will occupy its own line. This saves you applying code to each element.
Also align-center on span is not a done thing, it does work, but you won’t see it as a span only takes up as much space as it’s content, so currently your code is relying on the <p> tag to center the font icon.

Further to thi it would be best to read up on HTML and CSS. Wherever possible you should limit the use of inline styling (placing CSS inside the HTML).

[Tom]

That’s a lot of text-align: center styles 🙂

The icons are inline elements, so if they’re wrapped in a block or inline-block element which is set to text-align: center, they will be centered.

For example:

<div style="text-align: center">
   Every inline element inside here is centered.
</div>

[Author]

Posts