Centering a Grid of Columns Within a Page

  • Resolved PMorgan

    (@pmorgan)


    10 years, 5 months 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:

    http://www.acdctv.co.uk/accessories/

    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!

    http://wordpress.org/plugins/easy-columns/

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

    (@kcfried)

    10 years, 5 months 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 …
    </div>

    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:

    [ezdiv]
    [ezdiv1]…[/ezdiv1]
    [/ezdiv]

    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!

    Thread Starter PMorgan

    (@pmorgan)

    10 years, 5 months 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!

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