What is the best way to center a grid item in Material-UI within a React application?

I'm struggling with centering a grid element in MUI v5 and aligning a long paragraph to the left side while adding horizontal margin for big screens. Can anyone help me out with this? Thank you.

<Box
      style={{
        backgroundColor:"rgb(234, 237, 242)"
      }}      
    >
      <Grid container alignItems='center' justifyContent='center' maxWidth='md'>
        <Grid item xs={12} md={12} justifyContent="center">   
            <Typography align="center" variant="h4" style={{ fontWeight: 800 }} sx={{mb:4}}>
              Nice title
          </Typography>
            <Typography sx={{ px: 4 }} paragraph>very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line</Typography>
          </Grid>
        </Grid> 
    </Box>
cssreactjsmaterial-ui

Answer №1

Utilizing system properties is a straightforward solution.

    <Box
      display="flex"
      justifyContent="center"
      style={{
        backgroundColor:"rgb(234, 237, 242)"
      }}
    >
      ...

Answer №2

If you're looking for a reliable code snippet, give this one a try. I've tested it thoroughly and can confirm that it works flawlessly.

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

export default function BasicGrid() {
  return (
    <Box sx={{ flexGrow: 1, backgroundColor: 'rgb(234, 237, 242)' }}>
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <Item>
            <Typography align="center" variant="h4" style={{ fontWeight: 800 }} sx={{ mb: 4 }}>
              Hello
            </Typography>
            <Typography align="center" sx={{ px: 4 }} paragraph>
              very very long line
            </Typography>
          </Item>
        </Grid>
      </Grid>
    </Box>
  );
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to extract a file from the file system in React Native, convert it to base64, and then post it as JSON using HTTP

After following a helpful guide on audio and video recording in React Native from this informative article, I utilized the code available on Github here. The app I built allows users to record audio and save it to the file system. However, I encountered a ...

androidiosjsonreactjsreact-native

Is the footer html/css duplicated on a different page and displaying differently?

I have been working on a website and just finished the main page with the header, body, and footer. Now, as I moved on to creating the second page, I encountered an issue. I copied and pasted the code for the header from the main page onto the second page ...

htmlcssfooter

When a change occurs in the <input/> element within a <div>, the onChange event in React will be triggered

Upon entering text into the input, the onChange function is triggered on this code snippet. How is it possible for the onChange event to occur on a div element? Is there documentation available that explains this behavior? class App extends Component { ...

javascriptreactjsjsx

What is the best way to implement a Navbar link in React.js?

I am currently working on developing a website using Reactjs. I have successfully created a Navbar with two links - Home and Contact. However, when I click on the Contact link, although the URL changes accordingly, the page itself does not update. I have s ...

javascriptreactjsreact-routernavbar

Implementing array updates in ReactJS

I currently have the following in my state variable this.state = { check: 0, places: ["0","0","0","0","0","0","0","0"], } } My objective is to update a specific value within the array by calling a function. For instance, I a ...

reactjs

Design: Seeking a layout feature where one cell in a row can be larger than the other cells

To better illustrate my goal, refer to this image: Desired Output <\b> Currently, I'm achieving this: current output Imagine 7 rows of data with two columns each. The issue arises in row 1, column 2 where the control needs to span 5 row ...

htmlcssangular

The error message in Nextjs is indicating that the Swiper scss package path could not be

Encountered an issue while integrating swiper in Next.js. "next": "^11.1.2", "swiper": "^7.0.5" Despite using the specified versions, unable to access swiper.scss. Seeking guidance on resolving this problem. Error ...

reactjsnext.jsswiper.js

Tips for testing screen orientation using jest and testing-library/react

While testing a component in nextJs using testing-library/react and jestJs, I encountered an error when trying to access "window.screen.orientation.type". The error message read: "TypeError: Cannot read properties of undefined (reading 'type')". ...

reactjsnext.jsjestjsreact-testing-librarytesting-library

Strange CSS/browser storage glitch

UPDATE: JUST REALIZED THIS ISSUE IS ONLY OCCURRING ON FIREFOX, NOT CHROME ANOTHER UPDATE: Oddly enough, this problem only occurs locally. When I push it to GitHub, everything works fine. So strange. I suppose that means it's not a major issue. On my ...

javascriptcssgoogle-chromefirefox

Prevent event propagation in jQuery by using .stopPropagation() when hovering over a

When trying to implement event.stopPropagation() in a specific scenario, I encountered an issue with a blinking background image on my submenu. To address this, I added a pseudo-element (background:green) to the parent element by toggling a new class using ...

javascriptjquerycssstoppropagation

Validation (CSS 2.0): The CSS property name 'mso-number-format' is unrecognized and invalid

I am currently tasked with maintaining an ASP .Net application that includes a feature to export HTML tables to Excel. The HTML code includes elements like this: <td style="mso-number-format:\@;"> During the build process, I encounter an error s ...

cssexport-to-excel

ReactJS creating trouble with incorporation of CSS in Table

I've noticed some strange behavior with the alignment of my table data. It seems to be all over the place. How can I fix this issue? Is there a way to specify column widths and ensure the text starts from the same position? Take a look at the table b ...

cssreactjscss-tables

Finding a workaround for the absence of a leftToggle feature in ListItem component of Material-UI

Is there a way to move the toggle element to the other side in Material-UI's listItem without using the leftToggle option? The documentation does not specify a leftToggle attribute, so I am looking for alternative solutions. I would like to align the ...

javascriptreactjsmaterial-ui

What is the best way to access the value of an HTML tag in React?

Currently in the process of developing a feature for the price tab using React. These components are designed to allow users to add price classes to their shopping cart. One challenge I'm facing is how to retrieve the HTML string of an HTML tag. Here& ...

javascripthtmlreactjsdomrefs

Enhance your website with a dynamic div zoom feature using the Jquery Zoom

I've been scouring the internet for a jQuery plugin that allows me to zoom in on an image. There are many options out there, but I prefer ones that display the zoomed-in image in a separate area rather than directly on the original image. For example ...

javascriptjqueryhtmlcsszooming

Using a declared const in a separate React file

I've been searching for a solution, but haven't found anything that helps. I'm trying to retrieve data from an API and pass it to another page. The information is currently defined as "drink.strDrink", including the name and image. However ...

htmlarraysreactjsapi

The recharts error message displays: "There is no overload that matches this call."

I am currently working on developing a chart in react using the recharts library. To guide me, I am referencing an example provided in their documentation available at this link: https://codesandbox.io/s/zen-ellis-30cdb?file=/src/App.tsx While the project ...

javascriptreactjsrecharts

Guide on routing error 500 globally to a specific page with React-Redux

Currently, I am utilizing the react-redux starter found at this link. I am seeking guidance on how to redirect all API 500 errors to a specific page. Can someone assist me with this? ...

reactjsexpressreact-reduxhttp-status-code-500

Learn the steps to access localStorage data prior to client-side rendering with Next.js

For the past 3 days, I have been struggling with a strange warning while using react + next.js on the client side. The warning seems to be related to the isUserAuthenticated value stored in localStorage. Since localStorage is only accessible on the client ...

reactjsnext.js

Error encountered: NextJS version 14.0.3 - Uncaught error: NEXT_REDIRECT is not defined

I have a login page that needs to redirect to the app section after successful login, and the app section should redirect back to the login page if no user is logged in. The redirection in the AuthGuard component is functioning well: import { PropsWithChi ...

reactjsformshttp-redirectnext.js