Avatar should be centered on profile page

This is a fix of e04eedf0d07ff66dba3e881e9ef8bdf5a868619e

webapp/components/User/User.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="user" v-if="displayAnonymous">
-    <hc-avatar />
+    <hc-avatar class="avatar"/>
     <div>
       <b class="username">{{ $t('profile.userAnonym') }}</b>
     </div>
@@ -9,7 +9,7 @@
     <template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
       <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
         <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
-          <hc-avatar :user="user" />
+          <hc-avatar class="avatar" :user="user" />
           <div>
             <b class="username">{{ userName | truncate(18) }}</b>
           </div>
@@ -134,7 +134,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .avatar {
   display: inline-block;
   float: left;