Align the text to the center within the Paper component using React and Material-ui

I've been struggling to center text inside a paper component in Material UI, and nothing seems to be working. I attempted using display:flex in the parent component with align-items:center in the child component. I also tried adding padding:5px for equal spacing, but it didn't have any effect. Additionally, I experimented with text-align and vertical-align properties, but they too failed to produce the desired result. Here is how it currently appears: https://i.stack.imgur.com/HbwCL.png

My goal is to horizontally center the text within the three bottom boxes (paper components in Material-UI).

https://codesandbox.io/s/lingering-snowflake-grvxg?file=/src/App.js

cssreactjsmaterial-ui

Answer №1

Here's a styling suggestion for the paper class:

  paper: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
    verticalAlign: "middle"
    boxShadow: "4px 4px 4px rgba(0, 0, 0, 0.25)",
    borderRadius: "25px",
  },

To implement this, wrap your questions in a Paper component like this:

       <Paper className={classes.paper}>
             <Typography
                // style={{ width: "70%", margin: "auto" }} I think you should avoid break tags instead do something with the width
                variant="body2"
                color="textPrimary"
                component="span"
              >
                What are Tabaani experience standards and requirements?
              </Typography>
            </Paper>

Learn more about why you should avoid break tags here. You can also view a working example on codesandbox. Enjoy!

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

Achieve a gradient effect for the border color of MUI Checkbox

I'm currently working on customizing the appearance of a MuiCheckBox component by using styleOverrides. My goal is to create linear gradient borders for it. Any suggestions on how I can achieve this? MuiCheckbox: { styleOverrides: { root: { ...

reactjscheckboxmaterial-ui

What is causing the discrepancy between the appearance of my fiddle and my page?

Hey there, I encountered an issue while working on a page using jsFiddle - it seems to be behaving differently when viewed on the actual website! If you want to take a look: http://jsfiddle.net/8Hpmj/8/ http://ktaadn.me/about/ The example at ktaadn.me do ...

htmlcssjsfiddle

Encountered an error during the production build of NEXTJS, where it panicked due to the global thread pool not being initialized

While hosting my app on Heroku and running git push heroku main, I encountered the following error: panicked at 'the global thread pool has not been initialized.: threadpool builderror { kind: ioerror(error { kind: unsupported, message: "operatio ...

javascriptnode.jsreactjsnext.jsnode-modules

Expansive image coverage

My footer design includes a rounded left image, a repeating middle section, and a rounded right image. How can I ensure that it scales perfectly responsively without overlapping? Ideally, the solution would involve adjusting the width of the middle section ...

javascripthtmlcsswidth

Transfer dynamically created PDFs to Sanity utilizing NextJS and React

I've been working on a NextJS and Sanity e-commerce app where I have successfully set up mock products, a user login system, and checkout functionality. However, I am facing challenges with implementing an invoice system upon user order confirmation. ...

reactjsaxiosnext.jssanityreact-pdf

Resolving odd SVG anomalies

I recently exported three SVGs from Sketch to include in HTML, but one of them (specifically the Twitter icon) is presenting a mystery with its appearance. All three SVGs were created in the same manner, using #999999 as the stroke color and having a stro ...

htmlcsssvgsketchapp

Having trouble starting the localhost for my latest NextJS React project, as I keep getting the error message "Compiled /not-found in 1080ms"

Recently began a fresh setup of NextJS and I'm encountering an issue with starting up localhost. Each time I attempt to reload the project, I receive the error message 'Compiled /not-found in 1080ms (387 modules)'. Has anyone faced this issu ...

reactjsnext.js

Using CSS for hover transitions can be glitchy in Safari, especially when trying to keep images centered

After seeing an example on Design Shack, I was inspired to create linkable photos that zoom in slightly when hovered over. To achieve the desired centered animation effect, I had to tweak the top, left, margin-top, and margin-left properties until it worke ...

csshovercss-transitions

Apollo Client's implementation of a GraphQL query is resulting in a response that contains no data

After incorporating websockets and subscriptions into my React application, I am encountering issues with receiving empty arrays in the responses. Below is an excerpt from my server.js file: import * as dotenv from 'dotenv' dotenv.config() impor ...

reactjsgraphqlapolloapollo-clientsubscription

Is it possible to change the background color of a Bootstrap button using CSS overrides?

Desired Outcome Actual Result The goal is to toggle the red-background class, so that when hovering over the button-bullet, its background-color changes to #FCC1C5. Avoiding the use of .btn.button-bullet:hover</code due to jQuery logic disabling a ...

jquerycsstwitter-bootstrap

What is the best way to determine if the form has been submitted?

I am working on a React form and need to determine when the form has been successfully submitted in order to trigger another request in a separate form. const formRef = React.useRef<HTMLFormElement>(null); useEffect(() => { if (formRef &a ...

javascriptreactjs

Adding external JavaScript files that rely on jQuery to a ReactJS project

As a beginner in web development, I have a question regarding importing external JavaScript files in ReactJS. I currently have the following imports: import $ from 'jquery'; window.jQuery = $; window.$ = $; global.jQuery = $; import './asse ...

javascriptjqueryreactjsnpm

React - Incorrect components experiencing style changes due to setTimeout

Check out the code snippet here: https://jsfiddle.net/69z2wepo/204131/ A main component displays two 'notifications' each with different disappearance timings. class Page extends React.Component { constructor(props) { super(props); t ...

javascriptreactjs

Bring in personalized tag to TypeScript

I am working on a TypeScript file to generate an HTML page. Within this code, I want to import the module "model-viewer" and incorporate it into my project. import * as fs from "fs"; import prettier from "prettier"; import React from "react"; import ReactD ...

reactjstypescript

Using JQuery to toggle a fixed div at the bottom causes all other divs to shift upwards

I'm currently working on a chat feature using node JS, and while the functionality is perfect, I've run into an issue with the CSS aspect of it. The problem arises when we have multiple tabs and clicking on just one causes all the tabs to move u ...

phpjqueryhtmlcssnode.js

Ensuring the container height remains consistent with fluctuating content dimensions

Imagine a container with content, where the container's width is fixed but its height adjusts based on its inner content. Initially, when the content causes the container to be a specific height, the challenge arises in shrinking the inner elements w ...

htmlcss

Display a loading splash screen prior to loading Next.js

I am working on a NextJS website and I'm looking to incorporate a Splash Screen that displays before the site is fully loaded. However, since the Splash Screen is included in the NextJS code, it ends up loading after NextJS has rendered on the server ...

reactjsnginxnext.jssplash-screen

Show side by side using javascript

My dilemma lies in having a set of cards that are meant to be displayed inline, but I have to initially hide them using "display: none". When a specific button is clicked, I aim to reveal these cards; however, upon doing so, each card seems to occupy its o ...

javascriptcssbootstrap-4

JavaScript and Responsive Design Techniques

I'm struggling to create a responsive page that starts with a mobile-first approach, but I keep running into the same issue. When I have my dropdown menu in the mobile version, it looks good. However, when I try to switch it to the non-mobile version ...

javascripthtmlcss

Translation with React-i18next will occur once the component has been re-rendered

I have a webpage that supports both English and French languages using Next.js and react-i18next. The issue I am facing is that when I set the language to French (Frn) and refresh the page, it still displays English content. I noticed two peculiar things ...

reactjsnext.jsserver-side-renderingreact-i18next