@eb-components/flex-center v1.0.4

flex-center

Using Angular 6 or greater? Need something centered yesterday? Don't want a target painted on your back from writing awful, abusive CSS?

With the power of flexbox and Angular, I can now write awful, abusive CSS so you don't have to! (It's not bad, really.)

Add flex-center to your project and pass the blame off to your dependencies today!

Seriously though, if you just want your image or whatever centered in that div right now and find an extra dependency just for that to be worth it (and I do, personally), flex-center should do the trick for all but the most unusual cases.

Usage

In your project directory, run

yarn add @eb-components/flex-center

In the relevant module(s), add an import of the form

import { FlexCenterModule } from '@eb-components/flex-center'

Be sure and add FlexCenterModule to your @NgModule's imports array.

In your templates, you can use it like so:

<ebc-flex-center>This content is centered!</ebc-flex-center>

or:

<ebc-flex-center [contentOverride]="path.to.some.Angular.template.string"><ebc-flex-center>

Unless you're already using some incredibly exotic CSS, the content of ebc-flex-center should now automatically be centered within ebc-flex-center's containing element. Cool!

Build

Make sure you have all peer dependencies first!

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build. Which isn't particularly different from the normal one.

Notes

You may find that this works with earlier versions of Angular. You may not. Good luck.

Acknowledgements

This project was generated with help from Angular CLI version 6.0.8.