1

I have a flexbox grouping consisting of two elements. The first is an arrow icon and the other is text. I want the items to be center aligned vertically. However, horizontally, I want the arrow to be left aligned and the text to be perfectly centered in the parent (flex) container. How can I accomplish this?

As you can see in the code, I tried using the alignSelf property on the Text element. However, as you can see in the screenshot I shared, that did not work. I am using the Chakra UI library. Here is the codesandbox.

import { Flex, Text } from "@chakra-ui/react";
import { ArrowBackIcon } from "@chakra-ui/icons";

<Flex alignItems="center" background="grey">
  <ArrowBackIcon boxSize="32px" />
  <Text fontSize="24px" fontWeight={700} alignSelf="center">
    Confirm Your Information
  </Text>
</Flex>

enter image description here

Jevon Cochran
  • 1,565
  • 2
  • 12
  • 23
  • 1
    The linked duplicate provides several valid strategies. I like the [pseudo-element solution](https://stackoverflow.com/a/52177798/1264804) best for your case. – isherwood Mar 16 '23 at 16:03
  • Note that this was never really a React question. It could've been presented as a simple HTML structure instead, vastly simplifying the problem. – isherwood Mar 16 '23 at 16:04

0 Answers0