Saturday, February 8, 2014

Coder Tidbit: CSS Arithmetic

I was recently work on a project where I was attempting to center text in a div that had a left property of 50px. The issue with this was that the text centering was going to be off by 50px, a negligible amount for average browsing, but on a mobile phone with a double, or more, pixel density the amount was substantial.

To help accommodate this CSS provides a function called calc( ).

calc( ) takes the math that you'd like to have performed, runs, and dumps out the calculated value for you.

Here's the snippet of the code that worked for my needs: