This will be centered
import { Box, Center } from "@chakra-ui/react"
const Demo = () => {
return (
<Center bg="bg.emphasized" h="100px" maxW="320px">
<Box>This will be centered</Box>
</Center>
)
}
用法
¥Usage
import { Center, Circle, Square } from "@chakra-ui/react"<Center bg="tomato" h="100px" color="white">
This is the Center
</Center>示例
¥Examples
图标
¥Icon
Center 可用于在图标或数字周围创建框架。
¥Center can be used to create frames around icons or numbers.
1
import { Box, Center, HStack } from "@chakra-ui/react"
import { LuPhone } from "react-icons/lu"
const Demo = () => {
return (
<HStack>
<Center w="40px" h="40px" bg="tomato" color="white">
<LuPhone />
</Center>
<Center w="40px" h="40px" bg="tomato" color="white">
<Box as="span" fontWeight="bold" fontSize="lg">
1
</Box>
</Center>
</HStack>
)
}
内联居中
¥Center with Inline
使用 inline 将显示更改为 inline-flex。
¥Use the inline to change the display to inline-flex.
import { Box, Center, Link } from "@chakra-ui/react"
import { LuArrowRight } from "react-icons/lu"
const Demo = () => {
return (
<Link href="#">
<Center inline gap="4">
<Box>Visit Chakra UI</Box>
<LuArrowRight />
</Center>
</Link>
)
}
正方形
¥Square
Square 根据 size（宽度和高度）将其子元素居中。
¥Square centers its child given the size (width and height).
import { Square } from "@chakra-ui/react"
import { LuPhoneForwarded } from "react-icons/lu"
const Demo = () => {
return (
<Square size="10" bg="purple.700" color="white">
<LuPhoneForwarded />
</Square>
)
}
圆形
¥Circle
Circle 根据 size 将其子元素居中，并在其周围创建一个圆圈。
¥Circle centers its child given the size and creates a circle around it.
import { Circle } from "@chakra-ui/react"
import { LuPhoneForwarded } from "react-icons/lu"
const Demo = () => {
return (
<Circle size="10" bg="blue.700" color="white">
<LuPhoneForwarded />
</Circle>
)
}
属性
¥Props
居中
¥Center
正方形
¥Square
圆形
¥Circle