Center 居中

把内容在两个方向上居中。

书架还是空的

找到喜欢的作品之后，它会出现在这里。

import { BookOpen } from 'lucide-react'
import { Button, Card, Center, Heading, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Card className="w-full max-w-md">
      <Center className="h-56">
        <Stack gap="sm" align="center">
          <Center className="bg-inset text-muted size-12 rounded-full">
            <BookOpen className="size-6" />
          </Center>
          <Heading level={3} size="md">
            书架还是空的
          </Heading>
          <Text tone="muted" size="sm">
            找到喜欢的作品之后，它会出现在这里。
          </Text>
          <Button size="sm" variant="soft" tone="neutral">
            去逛逛
          </Button>
        </Stack>
      </Center>
    </Card>
  )
}

tsx

用法

import { Center } from '@hina-ui/react'

Center 是一个横纵都居中的 flex 容器。它不设定高度，纵向居中要看容器自身的高度，因此通常配合 h-* 或者 min-h-* 使用。

居中

import { Card, Center } from '@hina-ui/react'

export default function Demo() {
  return (
    <Center className="bg-inset h-32 w-full max-w-sm rounded-md">
      <Card className="grid size-16 place-items-center" padded={false}>
        居中
      </Card>
    </Center>
  )
}

tsx

示例

行内

inline 换成 inline-flex，让容器留在文字行里，用于把图标与文字对齐。

这段话中间嵌着一个

外部链接

，图标与文字在同一行里对齐。

import { ExternalLink } from 'lucide-react'
import { Center, Link, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Text className="max-w-md">
      这段话中间嵌着一个{' '}
      <Center inline className="gap-1">
        <Link href="#">外部链接</Link>
        <ExternalLink className="size-3.5" />
      </Center>{' '}
      ，图标与文字在同一行里对齐。
    </Text>
  )
}

tsx

API

属性	类型	默认值	说明
`inline`	`boolean`	`false`	是否为行内容器
`as`	`string`	`'div'`	渲染的标签
`className`	`string`	—	追加至容器的类名

属性	说明
`children`	子元素