WP Easy Columns
[resolved] Centering a Grid of Columns Within a Page (3 posts)

  1. PMorgan
    Posted 2 years ago #

    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!


  2. Pat Friedl
    Plugin Author

    Posted 2 years ago #

    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!

  3. PMorgan
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WP Easy Columns
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.