fix(QBtn): Fix button alignment for type="a" quasarframework#5645 (quasarframework#5647)

Author: pdanpdan

ui/dev/components/components/button-align.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="q-layout-padding">
+    <div class="row no-wrap q-col-gutter-x-md">
+      <div v-for="type in ['a', 'button']" :key="type" class="col q-gutter-y-md">
+        <div v-for="(prop, i) in props" :key="i" class="q-gutter-y-md">
+          <div class="row q-gutter-md items-center">
+            <q-btn :type="type" v-bind="prop" round icon="clear" color="primary" />
+            <q-btn :type="type" v-bind="prop" icon="clear" color="primary" />
+            <q-btn :type="type" v-bind="prop" icon="clear" color="primary" style="max-width: 0; min-height: 0" />
+            <q-btn :type="type" v-bind="prop" icon="clear" label="Label" color="primary" />
+            <q-btn :type="type" v-bind="prop" label="Label" color="primary" />
+            <q-btn :type="type" v-bind="prop" size="sm" no-caps label="Label" color="primary" />
+          </div>
+          <q-btn :type="type" v-bind="prop" icon="clear" label="Label" color="primary" class="full-width" />
+          <q-btn :type="type" v-bind="prop" icon="clear" label="Label" color="primary" class="full-width" align="left" />
+          <q-btn :type="type" v-bind="prop" icon="clear" label="Label" color="primary" class="full-width" align="right" />
+          <q-btn :type="type" v-bind="prop" icon-right="clear" label="Label" color="primary" class="full-width" />
+          <q-btn :type="type" v-bind="prop" icon-right="clear" label="Label" color="primary" class="full-width" align="left" />
+          <q-btn :type="type" v-bind="prop" icon-right="clear" label="Label" color="primary" class="full-width" align="right" />
+          <q-btn :type="type" v-bind="prop" label="Label" color="primary" class="full-width" />
+          <q-btn :type="type" v-bind="prop" label="Label" color="primary" class="full-width" align="left" />
+          <q-btn :type="type" v-bind="prop" label="Label" color="primary" class="full-width" align="right" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      props: [
+        {},
+        { outline: true },
+        { unelevated: true },
+        { push: true },
+        { flat: true }
+      ]
+    }
+  }
+}
+</script>

ui/src/components/btn/QBtn.sass

@@ -21,7 +21,6 @@
   @at-root #{selector-unify('a', &)}
     display: inline-flex
     flex-direction: column
-    align-items: center
 
   .q-icon, .q-spinner
     font-size: $button-line-height

ui/src/components/btn/QBtn.styl

@@ -20,7 +20,6 @@
   a&
     display inline-flex
     flex-direction column
-    align-items center
 
   .q-icon, .q-spinner
     font-size $button-line-height