fix(b-avatar): set align-items: center for default slot content (fixes: bootstrap-vue#5205) (bootstrap-vue#5207)

tmorehouse · jacobmllr95 · web-flow · commit c4981fd09825 · 2020-04-22T08:53:34.000+02:00
* fix(b-avatar): set `align-items: center` for default slot content (fixes: bootstrap-vue#5205) * Update README.md Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
diff --git a/src/components/avatar/README.md b/src/components/avatar/README.md
@@ -142,6 +142,19 @@ appearance, or if using custom icons or SVGs e.g.:
 <b-avatar><custom-icon></custom-icon></b-avatar>
 ```
 
+**Multi-line text example:**
+
+```html
+<template>
+  <div class="mb-2">
+    <b-avatar size="4em">Hello<br>World</b-avatar>
+    <b-avatar size="4em">你好<br>世界</b-avatar>
+  </div>
+</template>
+
+<!-- b-avatar-default-slot-multi-line.vue -->
+```
+
 **Notes:**
 
 - The default slot takes precedence over the `text`, `src` and `icon` props.
diff --git a/src/components/avatar/_avatar.scss b/src/components/avatar/_avatar.scss
@@ -46,16 +46,12 @@
     overflow: hidden;
     display: flex;
     justify-content: center;
+    align-items: center;
   }
 
   .b-avatar-text {
     text-transform: uppercase;
     white-space: nowrap;
-    align-items: center;
-  }
-
-  .b-avatar-custom {
-    vertical-align: middle;
   }
 
   > .b-icon {
