Center content with margin:0 auto

Working in SharePoint I almost expect, on a daily basis, to run into some annoying formatting issue due to an overly-generic CSS rule coming from the Core CSS that’s baked into the platform. Today I had a client trying to center some content (a cool News Rotator using the bxSlider jQuery plug-in, fed via the CorasWorks API) that was being loaded up via Content Editor Web Part (CEWP) but no matter what she did, she couldn’t get the CEWP to center within its parent Web Part Zone.

I then shared a handy CSS trick I picked up along the way; this can be used on any block-level element you want to center within its parent when you have a fixed width applied.
margin:0 auto

Using Firebug, it was clear to the customer that the parent DIV containing the Rotator was filling the horizontal space, but applying a “text-align:center” just resulted in the text within the Rotator items getting centered, not in centering the Rotator itself within its parent DIV.

I looked, saw the fixed width on the Rotator and knew right away that a “margin:0 auto” was all we needed – and voil√†, another happy CorasWorks customer!

Comments are closed.