Horizontal Centering with CSS
I recently had the challenge of centering a div with a set of image thumbnails in it. The problem was that the number of thumbnails varied depending on the project that was being viewed; i.e. - the width of the div was unknown, or more precisely, the width would change. Typical CSS centering techniques required that the width of the div to be centered was known and set by either pixel or percentage as so:
.center { width: 70%; margin-left:auto; margin-right:auto; } In my case, since the width changed, the above solution would not work. After a couple hours of searching through CSS documentation, I found the following solution using the display parameter. .variable-width-center{ display:table; margin-left:auto; margin-right:auto; } What this effectively does is treats my div with class .variable-width-center as a table element - which can be centered within another div using margin-left:auto and margin-right:auto; I found this technique was compatible in IE8, Safari 4.0, and Firefox 3.0. I did not check older/alternative browsers, so you may want to perform additional QA if supporting those browsers is a priority of yours. If you found this useful to you, or would like to suggest alternatives, please comment below. I love comments :) ![]() Why Move Like A Butterfly?Back in 2000, I graduated with a Bachelors in Applied Mathematics and Statistics, with and understudy of computer science. I started my working career at Morgan Stanley in their retirement planning division helping brokers service their clients. In pursuit of a more challenging position, I moved to California and started working for Fair Isaac. Using prorietary formulas in a UNIX environement, I helped redevelop the famed FICO credit score for several of the credit burous. After two years of learning about consumer credit, I moved onward to Wells Fargo Small Business Risk Management and worked as a liason between our Lender in the field, Risk Management Corporate, and our internal compliance division. A little tired of the static 'cube life', I took a break from finance to travel the world, study massage therapy and personal training, and learn a little more about myself. After traveling through Thailand, England, France, and Italy, I decided it was time to make a move in a possitive direction and begin to study a trade I was passionate about. That's when I began studying for my masters degree at Stevens in Product Architecture and Engineering. Is the pattern of my diverse interests becoming evident yet? Butterflies, specifically the monarch, is an insect that behaves in many ways much like I model my designs. They take timely cues from the season to begin their journey to a place they have never been before. During that journey they use a wide variety of directional aids to guide them. As a cognitive collaboration, they flutter with the wind toward their destination where they reproduce, and their life journey ends. The new colony is born, and like their predecessor, they venture to lands unknown, with only each other and the earth to guide them.Many of my projects also start with nothing more than a need to go. The final destination is a mystery, but from where I stand, it's clear a problem exists and a solution must be found. Relying on nothing more than a networked community of collaborators, and some intuition, I venture out. Along the way, needed resources become evident and the path becomes clear. When a design solution is finally found, I leave an imprint of my work, discover a new challenge, and my journey begins again. That's why I move like a butterfly; Do you? ![]() |