Add center utility class, and explain how to use it

tobiasahlin · Oct 28, 2019 · b999571 · b999571
1 parent f436d4c
commit b999571
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@ Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spi
 
 - Add `spinkit.css` or `spinkit.min.css` to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need)
 - Add a spinner to your project by copy-pasting HTML from `spinkit.css` or `examples.html`
+- Add the `sk-center` utility class to the spinner to center it (it sets `margin` to `auto`)
 - By default, the `width` and `height` of all spinners are set to `40px`. `background-color` is set to `#333`.
 - Configure the spinner by overwriting the CSS variables, primarily `--sk-size` (spinner width & height) and `--sk-color` (spinner color). If you need broader browser support, remove the CSS variables.
 

diff --git a/spinkit.css b/spinkit.css
@@ -5,6 +5,10 @@
 }
 
 
+/* Utility class for centering */
+.sk-center { margin: auto; }
+
+
 /*  Plane
 
       <div class="sk-plane"></div>