diff --git a/includes/front.php b/includes/front.php
index cb42e40..5e1d89b 100644
--- a/includes/front.php
+++ b/includes/front.php
@@ -51,6 +51,19 @@ final class Menu_Icons_Front_End {
 	 */
 	protected static $hidden_label_class = 'visuallyhidden';
 
+	/**
+	 * Align-self map for vertical-align values.
+	 *
+	 * @access private
+	 * @var    array
+	 */
+	private static $align_self_map = array(
+		'top'      => 'flex-start',
+		'middle'   => 'center',
+		'bottom'   => 'flex-end',
+		'baseline' => 'baseline',
+	);
+
 
 	/**
 	 * Add hooks for front-end functionalities
@@ -339,6 +352,18 @@ public static function get_icon_style( $meta, $keys, $as_attribute = true ) {
 
 			$rule = self::$default_style[ $key ];
 
+			// Special handling for vertical-align because it affects the layout of flex containers.
+			if ( 'vertical_align' === $key ) {
+				if ( ! isset( $meta[ $key ] ) || $meta[ $key ] === $rule['value'] ) {
+					continue;
+				}
+
+				$stored                       = $meta[ $key ];
+				$style_a[ $rule['property'] ] = $stored;
+				$style_a['align-self']        = isset( self::$align_self_map[ $stored ] ) ? self::$align_self_map[ $stored ] : 'center';
+				continue;
+			}
+
 			if ( ! isset( $meta[ $key ] ) || $meta[ $key ] === $rule['value'] ) {
 				continue;
 			}
@@ -355,13 +380,13 @@ public static function get_icon_style( $meta, $keys, $as_attribute = true ) {
 			return $style_s;
 		}
 
-		foreach ( $style_a as $key => $value ) {
-			$style_s .= "{$key}:{$value};";
+		foreach ( $style_a as $prop => $value ) {
+			$style_s .= "{$prop}:{$value};";
 		}
 
 		$style_s = esc_attr( $style_s );
 
-		if ( $as_attribute  ) {
+		if ( $as_attribute ) {
 			$style_s = sprintf( ' style="%s"', $style_s );
 		}
 
diff --git a/includes/meta.php b/includes/meta.php
index fd8563d..51c8d0f 100644
--- a/includes/meta.php
+++ b/includes/meta.php
@@ -103,6 +103,14 @@ public static function get( $id, $defaults = array() ) {
 			$value['position'] = $defaults['position'];
 		}
 
+		// Backward-compatibility: values removed in favour of align-self support.
+		$supported_vertical_align = array( 'top', 'middle', 'bottom', 'baseline' );
+		if ( isset( $value['vertical_align'] ) &&
+			! in_array( $value['vertical_align'], $supported_vertical_align, true )
+		) {
+			$value['vertical_align'] = 'middle';
+		}
+
 		if ( isset( $value['size'] ) && ! isset( $value['font_size'] ) ) {
 			$value['font_size'] = $value['size'];
 			unset( $value['size'] );
diff --git a/includes/settings.php b/includes/settings.php
index 666eb57..c7f88f4 100644
--- a/includes/settings.php
+++ b/includes/settings.php
@@ -535,18 +535,10 @@ public static function get_settings_fields( array $values = array() ) {
 				'label'   => __( 'Vertical Align', 'menu-icons' ),
 				'default' => 'middle',
 				'choices' => array(
-					array(
-						'value' => 'super',
-						'label' => __( 'Super', 'menu-icons' ),
-					),
 					array(
 						'value' => 'top',
 						'label' => __( 'Top', 'menu-icons' ),
 					),
-					array(
-						'value' => 'text-top',
-						'label' => __( 'Text Top', 'menu-icons' ),
-					),
 					array(
 						'value' => 'middle',
 						'label' => __( 'Middle', 'menu-icons' ),
@@ -555,18 +547,10 @@ public static function get_settings_fields( array $values = array() ) {
 						'value' => 'baseline',
 						'label' => __( 'Baseline', 'menu-icons' ),
 					),
-					array(
-						'value' => 'text-bottom',
-						'label' => __( 'Text Bottom', 'menu-icons' ),
-					),
 					array(
 						'value' => 'bottom',
 						'label' => __( 'Bottom', 'menu-icons' ),
 					),
-					array(
-						'value' => 'sub',
-						'label' => __( 'Sub', 'menu-icons' ),
-					),
 				),
 			),
 			'font_size'      => array(