diff --git a/snippets/ghost-trick.md b/snippets/ghost-trick.md new file mode 100644 index 000000000..195f0a03b --- /dev/null +++ b/snippets/ghost-trick.md @@ -0,0 +1,42 @@ +### Ghost trick + +Vertically centering an element in another + +#### HTML + +```html +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem itaque, natus? Ab aliquid animi asperiores delectus dolor error expedita ipsam iste nihil pariatur provident quae quia, quis soluta suscipit tempora.

+
+``` + +#### CSS + +```css +.ghosting { + height: 300px; + background: #0ff; +} + +.ghosting:before { + content: ""; + display: inline-block; + height: 100%; + vertical-align: middle; +} + +p { + display: inline-block; + vertical-align: middle; +} +``` + +#### Explanation + +In some cases you can use this simple method to vertically align inline elements without touching position property. + +#### Browser support + +- https://caniuse.com/#feat=inline-block + +