Center 居中

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

书架还是空的

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

<script setup lang="ts">
  import { BookOpen } from '@lucide/vue'
  import { Button, Card, Center, Heading, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Card class="w-full max-w-md">
    <Center class="h-56">
      <Stack gap="sm" align="center">
        <Center class="bg-inset text-muted size-12 rounded-full">
          <BookOpen class="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>
</template>

vue

用法

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

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

居中

<script setup lang="ts">
  import { Card, Center } from '@hina-ui/vue'
</script>

<template>
  <Center class="bg-inset h-32 w-full max-w-sm rounded-md">
    <Card class="grid size-16 place-items-center" :padded="false">居中</Card>
  </Center>
</template>

vue

示例

行内

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

这段话中间嵌着一个

外部链接

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

<script setup lang="ts">
  import { ExternalLink } from '@lucide/vue'
  import { Center, Link, Text } from '@hina-ui/vue'
</script>

<template>
  <Text class="max-w-md">
    这段话中间嵌着一个
    <Center inline class="gap-1">
      <Link href="#">外部链接</Link>
      <ExternalLink class="size-3.5" />
    </Center>
    ，图标与文字在同一行里对齐。
  </Text>
</template>

vue

API

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

插槽	说明
`default`	子元素