From a31d23fc99954336775f90194ac46078dd61513f Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 12 Jan 2019 13:39:00 +0200 Subject: [PATCH] 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 -
-

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