From 8856fa2f7e5b354ca41397983578a5135afb8ea4 Mon Sep 17 00:00:00 2001
From: "farkasjanos.james@gmail.com" <farkasjanos.james@gmail.com>
Date: Sun, 21 Oct 2018 06:55:10 +0200
Subject: [PATCH 1/3] Add ghost trick snippet

---
 snippets/ghost-trick.md | 42 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 snippets/ghost-trick.md

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
+<div class="ghosting">
+    <p>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.</p>
+</div>
+```
+
+#### 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
+
+<!-- tags: layout -->

From 5941e2238874ea8cbb8614ae7f1da481b33dc19e Mon Sep 17 00:00:00 2001
From: FarkasJanos <farkasjanos.james@gmail.com>
Date: Wed, 31 Oct 2018 09:19:13 +0100
Subject: [PATCH 2/3] Update ghost-trick.md

---
 snippets/ghost-trick.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/snippets/ghost-trick.md b/snippets/ghost-trick.md
index 195f0a03b..a3d2039ee 100644
--- a/snippets/ghost-trick.md
+++ b/snippets/ghost-trick.md
@@ -31,6 +31,8 @@ p {
 }
 ```
 
+#### Demo
+
 #### Explanation
 
 In some cases you can use this simple method to vertically align inline elements without touching position property.

From a31d23fc99954336775f90194ac46078dd61513f Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Sat, 12 Jan 2019 13:39:00 +0200
Subject: [PATCH 3/3] Fixed snippet according to guidelines

---
 snippets/ghost-trick.md | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

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
-<div class="ghosting">
-    <p>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.</p>
+<div class="ghost-trick">
+  <div class="ghosting">
+    <p>Vertically centered without changing the position property.</p>
+  </div>
 </div>
 ```
 
@@ -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