Getting something to center align – Help!

  • Hello. I have been working on setting up my page here:

    https://mycarmony.com/carmony/wordpress/

    For the life of me, I cannot get the social media icons on the page align to the center. I have tried every div code I can concieve but they will not budge. Here is the html in that section for the icons:

    <div class=”con-key-feature span3 skt_animate_when_almost_visible small-to-large skt_start_animation”><div align=”center”><i class=”fa fa-5x fa-facebook-official”></i> </div></div><div class=”con-icon-title”> </div><div class=”con-icon-desc”> </div><div align=”center”>
    <div class=”con-key-feature span3 skt_animate_when_almost_visible small-to-large skt_start_animation”><i class=”fa fa-5x fa-twitter-square”></i> </div></div><div class=”con-icon-title”> </div><div class=”con-icon-desc”> </div>

    How do I get them to center align? Any help is greatly appreciated. Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi,

    According to this source,
    , that way of centering is deprecated.

    Here’s what works for me in text widgets, instead:

    <p style=”text-align:center;”>centered text/image</p>
    (Could use div instead of p, of course.)

    Maybe there’s something else preventing them from centering, but you might want to give this a try. Hope this helps.

    –Amelia

    Sorry, something went wrong when I typed in the link. Here it is again:

    Deprecated HTML Tags

    Thread Starter carmony

    (@carmony)

    Thank you so much! This helped alot. I got them both in the center but now they are stacked on top of one another. Any idea how to make them sit next to each other. Here is the current code:

    <div style=”text-align:center;”>
    <i class=”fa fa-5x fa-facebook-official”></i> </div><div class=”con-icon-title”> </div></p>
    <div style=”text-align:center;”>
    <i class=”fa fa-5x fa-twitter-square”></i> </div><div class=”con-icon-title”> </div>
    </p>

    Oh, I see. In that case, you can take what is the better approach, anyway, and target those selectors in your css.

    In your font-awesome css stylesheet (not in your regular stylesheet), I believe you should add the following in order to get them on the same horizontal line:

    .fa-5x {
    float: right;
    }

    After that, I was able to fine-tune the positioning to have them centered by adding this to this other selector:

    i.fa.fa-5x.fa-facebook-official {
    margin-left: .5em;
    margin-right: 42%;
    }

    So this definitely worked in the Chrome dev tools. You should give it a try. Might still need to mess with the margins and such to get the positioning just where you want it.

    Hope this helps.
    –Amelia

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Getting something to center align – Help!’ is closed to new replies.