Support » Plugin: WP Easy Columns » Centering a Grid of Columns Within a Page

  • Resolved PMorgan


    Hi All,

    Not a major issue but something that’s been bugging me for a little while.

    On a few of our pages we have a “grid” style layout of images and links through to pages of Woocommerce products/categories.

    Easy Columns works perfectly for this and (it took me a while) but I’ve got it looking great, as on the page here:


    One thing annoying me though is I can’t for the life of me get the three columns centered in the page! they’re pretty close but, hey I’m a perfectionist!

    I’ve tried wrapping the the whole lot in <span style=”align:center”>…</span> and <div…>…</div> and <p…>…</p> but none of these worked. I’ve tried selecting the whole lot in the visual editor and hitting the center align button, still nothing. I know columns within columns doesn’t always work so I can’t see a way to do it like this. Anyone got any ideas??

    Many thanks in advance!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Pat Friedl


    I think the problem lies in the fact that the columns automatically float left. If you do wrap them in a <div>, you may want to do it like this:

    <div style=”margin: 0 auto;text-align:center;”>
    … columns …

    and in the easy columns options, set the style to:

    .ezcol {
    text-align:left !important;

    That *Should* help. I’m doing that myself on a sales page. I’m actually wrapping things in a 100% width div so it stretches across the page, then that wraps a div that’s centered with a max-width of 980px. Inside that are my columns. Seems to work well right now in all browsers.

    I’m going to be adding an update that’ll let you basically nest the <div> shortcodes by adding: ezdiv1-ezdiv5 so you can have this:


    Tested and working nicely. I’ll be updating here in a couple days once I get my other project put to bed. Hope that helps!

    Hi (fellow) Pat!

    Thanks for getting back to me and sorry for the late reply. A very informative post for a beginner, but I’m sorry to say it didn’t work for me. 🙁

    I placed the .ezcol code in the custom CSS of Easy Columns settings and tried wrapping the whole lot in a div with the style settings you suggested but that made no change.

    I realised I’m probably not using EZ Col in the correct way as instead of doing 3x cols with 3+ rows, I’m doing 1x row of 3rd cols, another row of 3rd cols, etc etc.

    So I tried wrapping the whole of the top row in the <div..> you suggested but that didn’t have any effect either…

    Oh well, I’ll keep experimenting! Luckily it’s just a minor styling issue 🙂

    Let me know if you have any other suggestions and thanks for the great plug-in!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Centering a Grid of Columns Within a Page’ is closed to new replies.