Question 73366 in Reactjs Question posted in
The new location for the React Documentation can be found here.

how to text align a typography element of mui whose parent's position is fixed – Reactjs

Home Component

const Home = ({ mode, setMode }) => {
  return (
    <Box m={-1} sx={{overflowX:'hidden'}}>
      <Navber/>
      <Stack direction="row" spacing={2} justifyContent="space-between">
        <Leftbar/>
        <Feed/>
        <Rightbar/>      
      </Stack>
    </Box>
  );
};

Leftbar



const Leftbar = () => {
    const styles = {
      typo: { 
        position: 'fixed',
        color:'blue',
        textAlign: 'center', 
      },
    };
return (
      <Box
        flex={3}
        p={2}
        bgcolor="red"
        sx={{ display: { xs: 'none', sm: 'block' } }}
      >
        <Box position="fixed" maxWidth="20%">
          <Typography   variant={'h4'} style={styles.typo}>
          Sam Aggarwal
          </Typography>
        </Box>
      </Box>
    );
  };

  export default Leftbar;

I’ve tried everything, including relative positioning and inline blocks, but I still can’t get the element to be in the centre. Specifically, I want the first typography element to be in the centre, and the remaining typography elements to be under the first one on the left.
Don’t move the second box, though, since I require that position to be corrected.

Please Provide Assistance!

enter image description here

Tags:

2

Answers


  1. 0

    You can add width: "100%" to your typo style like this:

    typo: {
  position: "fixed",
  color: "blue",
  textAlign: "center",
  width: "100%"
}

    You can take a look at this sandbox for a live working example of center aligned Typography.

    Login or Signup to reply.
  2. 0

    I don’t see why you have to use position fixed for the parent! The box with position fixed and wdith: 20% will only give this typo to move to at most 20% of screen.

    Honestly your left red box doesn’t seem to be just 20%. It looks like 30%. So it won’t center if you use position fixed with wrong width!

    But to be center of the fixed parent use this:

    typo: {
  position: "relative",
  color: "blue",
  textAlign: "center",
  width: "100%"
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search