diff --git a/packages/collapse/src/collapse-item.vue b/packages/collapse/src/collapse-item.vue
index a749ac36b..29d59312a 100644
--- a/packages/collapse/src/collapse-item.vue
+++ b/packages/collapse/src/collapse-item.vue
@@ -20,11 +20,11 @@
         @focus="handleFocus"
         @blur="focusing = false"
       >
+        <slot name="title">{{title}}</slot>
         <i
           class="el-collapse-item__arrow el-icon-arrow-right"
           :class="{'is-active': isActive}">
         </i>
-        <slot name="title">{{title}}</slot>
       </div>
     </div>
     <el-collapse-transition>
diff --git a/packages/theme-chalk/src/collapse.scss b/packages/theme-chalk/src/collapse.scss
index 1d1b6daee..f86aed3ab 100644
--- a/packages/theme-chalk/src/collapse.scss
+++ b/packages/theme-chalk/src/collapse.scss
@@ -8,6 +8,8 @@
 }
 @include b(collapse-item) {
   @include e(header) {
+    display: flex;
+    align-items: center;
     height: $--collapse-header-height;
     line-height: $--collapse-header-height;
     background-color: $--collapse-header-fill;
@@ -19,10 +21,8 @@
     transition: border-bottom-color .3s;
     outline: none;
     @include e(arrow) {
-      margin-right: 8px;
+      margin: 0 8px 0 auto;
       transition: transform .3s;
-      float: right;
-      line-height: 48px;
       font-weight: 300;
       @include when(active) {
         transform: rotate(90deg);