Message: fix content not vertically aligned (#2904)

packages/message/src/main.vue

@@ -8,8 +8,7 @@
       @mouseleave="startTimer">
       <img class="el-message__img" :src="typeImg" alt="" v-if="!iconClass">
       <div class="el-message__group" :class="{ 'is-with-icon': iconClass }">
-        <i class="el-message__icon" :class="iconClass" v-if="iconClass"></i>
-        <p>{{ message }}</p>
+        <p><i class="el-message__icon" :class="iconClass" v-if="iconClass"></i>{{ message }}</p>
         <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></div>
       </div>
     </div>

packages/theme-default/src/message.css

@@ -21,6 +21,7 @@
       margin-left: 38px;
       position: relative;
       height: 20px;
+      line-height: 20px;
 
       @when with-icon {
         margin-left: 0;
@@ -28,13 +29,10 @@
 
       & p {
         font-size: var(--font-size-base);
-        line-height: 20px;
         margin: 0 34px 0 0;
         white-space: nowrap;
         color: var(--message-content-color);
         text-align: justify;
-        display: inline-block;
-        vertical-align: middle;
       }
     }