Centering a Grid of Columns Within a Page

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!

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!