diff --git a/snippets/ghost-trick.md b/snippets/ghost-trick.md index a3d2039ee..323e9e7eb 100644 --- a/snippets/ghost-trick.md +++ b/snippets/ghost-trick.md @@ -1,12 +1,14 @@ ### Ghost trick -Vertically centering an element in another +Vertically centers 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.

+
+
+

Vertically centered without changing the position property.

+
``` @@ -14,20 +16,20 @@ Vertically centering an element in another ```css .ghosting { - height: 300px; - background: #0ff; + height: 300px; + background: #0ff; } .ghosting:before { - content: ""; - display: inline-block; - height: 100%; - vertical-align: middle; + content: ""; + display: inline-block; + height: 100%; + vertical-align: middle; } p { - display: inline-block; - vertical-align: middle; + display: inline-block; + vertical-align: middle; } ``` @@ -35,7 +37,7 @@ p { #### Explanation -In some cases you can use this simple method to vertically align inline elements without touching position property. +Use the style of a `:before` pseudo-element to vertically align inline elements without changing their `position` property. #### Browser support