diff --git a/templates/default/070-components/UI-framework/Symbol/_ui-component_avatar.scss b/templates/default/070-components/UI-framework/Symbol/_ui-component_avatar.scss
index 054671915e47..cd21975c9d08 100755
--- a/templates/default/070-components/UI-framework/Symbol/_ui-component_avatar.scss
+++ b/templates/default/070-components/UI-framework/Symbol/_ui-component_avatar.scss
@@ -62,13 +62,15 @@ $zoom-large: math.div($il-avatar-size-large, $il-avatar-size);
 	}
 
 	&.il-avatar-letter {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+
 		span.abbreviation {
 			font-weight: $il-avatar-letter-abbreviation-font-weight;
 			text-transform: $il-avatar-letter-abbreviation-font-transform;
 			font-size: calc($il-avatar-inner-size / 2);
 			line-height: 1;
-			position: relative;
-			top: calc($il-avatar-inner-size / 4);
 		}
 
 		@for $i from 1 through length($il-avatar-colors) {
@@ -101,7 +103,6 @@ $zoom-large: math.div($il-avatar-size-large, $il-avatar-size);
 		&.il-avatar-letter {
 			span.abbreviation {
 				font-size: calc($il-avatar-inner-mobile-size / 2);
-				top: calc($il-avatar-inner-mobile-size / 4);
 			}
 		}
 	}
diff --git a/templates/default/delos.css b/templates/default/delos.css
index e41b805c7794..f59e78a70c66 100644
--- a/templates/default/delos.css
+++ b/templates/default/delos.css
@@ -11075,13 +11075,16 @@ div.alert ul > li:before {
   overflow: hidden;
   object-fit: cover;
 }
+.il-avatar.il-avatar-letter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
 .il-avatar.il-avatar-letter span.abbreviation {
   font-weight: 300;
   text-transform: inherit;
   font-size: 20.5px;
   line-height: 1;
-  position: relative;
-  top: 10.25px;
 }
 .il-avatar.il-avatar-letter.il-avatar-letter-color-1 {
   background-color: #0e6252;
@@ -11226,7 +11229,6 @@ div.alert ul > li:before {
   }
   .il-avatar.il-avatar-letter span.abbreviation {
     font-size: 11.25px;
-    top: 5.625px;
   }
 }
 .il-table-presentation-viewcontrols {