diff --git a/web/styles/message_row.css b/web/styles/message_row.css
index d172605fef..d579fad9a6 100644
--- a/web/styles/message_row.css
+++ b/web/styles/message_row.css
@@ -242,6 +242,13 @@ $time_column_min_width: 50px; /* + padding */
                     ".      more      .        . .   "
                     ".      reactions .        . .   ";
 
+                .message-avatar {
+                    /* Set the line-height to match the height of the avatar image
+                       to center me-messages within the baseline group. */
+                    line-height: var(--message-box-avatar-height);
+                    align-self: baseline;
+                }
+
                 .message_sender {
                     /* Don't display message sender as flexbox for me-messages. */
                     display: block;
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 667453bf20..6e5b876cc6 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -83,8 +83,10 @@ body {
     --right-sidebar-width: 250px;
 
     /*
-    Message box line-height.
+    Message box elements and values.
     */
+    --message-box-avatar-width: 35px;
+    --message-box-avatar-height: var(--message-box-avatar-width);
     --message-box-line-height: 1.214;
 
     /*
@@ -1851,8 +1853,12 @@ div.focused_table {
 
 .inline_profile_picture {
     display: inline-block;
-    width: 35px;
-    height: 35px;
+    width: var(--message-box-avatar-width);
+    height: var(--message-box-avatar-height);
+    /* Don't inherit the line-height from message-avatar;
+       this preserves the dimensions and rounded corners
+       on the image itself. */
+    line-height: 1;
     margin-right: 11px;
     vertical-align: top;
     border-radius: 4px;