fix(core): center align user avatar in doc property (#12908)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Added an option to center-align user labels in components displaying
user information, improving visual alignment of avatars and usernames.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/components/workspace-property-types/created-updated-by.tsx

@@ -46,6 +46,7 @@ const CreatedByUpdatedByAvatar = (props: {
           id={userId}
           size={props.size}
           showName={props.showName}
+          align="center"
           tooltip={
             props.type === 'CreatedBy' ? CreatedUsernameTip : UpdatedUsernameTip
           }
@@ -198,7 +199,12 @@ export const ModifiedByGroupHeader = ({
   return (
     <PlainTextDocGroupHeader groupId={groupId} docCount={docCount}>
       <div className={styles.userLabelContainer}>
-        <PublicUserLabel id={userId} size={20} showName={false} />
+        <PublicUserLabel
+          id={userId}
+          size={20}
+          showName={false}
+          align="center"
+        />
       </div>
     </PlainTextDocGroupHeader>
   );

packages/frontend/core/src/modules/cloud/views/public-user.tsx

@@ -2,7 +2,12 @@ import { Avatar, Tooltip } from '@affine/component';
 import { useCurrentServerService } from '@affine/core/components/providers/current-server-scope';
 import { useI18n } from '@affine/i18n';
 import { useLiveData } from '@toeverything/infra';
-import { type ComponentType, useLayoutEffect, useMemo } from 'react';
+import {
+  type ComponentType,
+  type CSSProperties,
+  useLayoutEffect,
+  useMemo,
+} from 'react';
 
 import { PublicUserService } from '../services/public-user';
 import * as styles from './public-user.css';
@@ -12,11 +17,13 @@ export const PublicUserLabel = ({
   size = 20,
   showName = true,
   tooltip: NameTip,
+  align = 'baseline',
 }: {
   id: string;
   size?: number;
   showName?: boolean;
   tooltip?: ComponentType<{ userName: string }>;
+  align?: CSSProperties['alignItems'];
 }) => {
   const serverService = useCurrentServerService();
   const publicUser = useMemo(() => {
@@ -59,7 +66,7 @@ export const PublicUserLabel = ({
         ) : null
       }
     >
-      <span className={styles.publicUserLabel}>
+      <span className={styles.publicUserLabel} style={{ alignItems: align }}>
         <Avatar
           url={user?.avatar}
           name={user?.name ?? ''}