postcss-center
PostCSS plugin to center elements.
Introduction
Centering elements in CSS isn't exactly straight-forward, but we can change that!
Transpiles into:
Of course, you don't have to include both top
and left
:
Transpiles into:
Or...
Transpiles into:
That's about it!
Conditions
- If the value of
top
orleft
is notcenter
it will be preserved. If both are notcenter
, this plugin will do nothing! - If the rule already has a
position
it will only be preserved if its value isrelative
orfixed
. All other values will be replaced withabsolute
. - If the rule has a
position
ofrelative
or the value ofleft
is notcenter
, themargin-right
declaration will not be inserted.
Installation
$ npm install postcss-center
Usage
JavaScript
;
TypeScript
; postcss;
Options
None at this time.
Testing
Run the following command:
$ npm test
This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.
Watching
For much faster development cycles, run the following commands in 2 separate processes:
$ npm run build:watch
Compiles TypeScript source into the ./dist
folder and watches for changes.
$ npm run watch
Runs the tests in the ./dist
folder and watches for changes.