From d94cb7a4210c6aad8ac0330e98b01062e24aab0b Mon Sep 17 00:00:00 2001
From: Noah Benham <noahbenham@users.noreply.github.com>
Date: Tue, 30 Nov 2021 13:57:20 -0700
Subject: [PATCH] Fix icon alignment for large icons

Icons larger than the default 24x24 are misaligned about 5px right of center. Flex resolves this issue by horizontally & vertically centering within the parent `span`.
---
 src/VerticalTimelineElement.css | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/VerticalTimelineElement.css b/src/VerticalTimelineElement.css
index 8787fa5..25709fe 100644
--- a/src/VerticalTimelineElement.css
+++ b/src/VerticalTimelineElement.css
@@ -29,6 +29,9 @@
 }
 
 .vertical-timeline-element-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
@@ -46,11 +49,6 @@
   display: block;
   width: 24px;
   height: 24px;
-  position: relative;
-  left: 50%;
-  top: 50%;
-  margin-left: -12px;
-  margin-top: -12px;
 }
 
 @media only screen and (min-width: 1170px) {