'Material UI- Divider not in Middle in React

Title says it all - my divider is not lying in the middle of my text. My current result looks like this:

enter image description here

But I want my divider to be in the middle likeso (see red line)

enter image description here

What's weird is that the material ui documentation demonstrates that this is a default behavior but for some reason it is not the case for me.

My code is as follows:

<Divider textAlign="center" variant="inset"><Typography variant="h3">About</Typography></Divider>
htmlcssreactjsmaterial-ui


Solution 1:[1]

I was having this issue and what i did to solve it is to give the typography a display flex, align and justifyContent to the center and also setting the width and the height to 100%

  <Divider
        textAlign="center"
        sx={{
          border: "1px solid #E6E6E"
        }}
      >
        <Typography
          variant="h3"
          sx={{
            display: "flex",
            justifyContent: "center",
            width: "100%",
            height: "100%",
            alignItems: "center",
            
          }}
        >
          About
        </Typography>
      </Divider>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 bankole

Related Questions