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

Utilizing KeyboardDatePicker with React Hook Form: A Guide to Retrieving Dates in YYYY-MM-DD Format

For my form, I am utilizing material ui along with react hook form <MuiPickersUtilsProvider utils={DateFnsUtils}> <Controller name="date_of_birth" control={control} defaultV ...

reactjsmaterial-uireact-hook-form

Encountered an issue in ReactTS where a POST request to the API failed due to an unsupported media

I am looking to send data from ReactTS to an API. When testing with Postman, the data is successfully posted without any issues. API: [HttpPost] public async Task<ActionResult<Ticket>> PostTicket([FromBody]Ticket ticket) ...

reactjsapireact-tsx

Having trouble aligning and resizing text and divs accurately

Hello, I'm having trouble centering my text within a div and fitting three divs inside my content area. Here is the code snippet: HTML <div id="content"> <div class="latest"> <p>Gentlemen, these are my latest works< ...

csshtmltextcenter

Conceal a div element only if it is nested within a particular div class

I have a question about hiding a specific div within another div. Here is the scenario: <div class="xp-row xp-first-row"> <div class="social-buttons"> Some Content Here </div> </div> The goal is to hi ...

htmlcss

Incorporating environment variables into React applications with the help of Vite

I'm currently working on a React project where I need to fetch data from a weather API. However, I've encountered an issue when trying to use the API key stored in a .env file using import.meta.env.VITE_API_KEY;. The error message states that the ...

reactjsenvironment-variablesfetch-apiapi-keydotenv

TypeScript Definitions for Material-UI version 15

Is there a Material-UI v15 TypeScript definition file in the works? I need it for a project I'm working on and as a TypeScript newbie, I want to make sure the custom file I've begun is accurate. ...

reactjstypescriptmaterial-uidefinitelytypeddefinitions

Clicking on a React Material UI ListItem

I am trying to develop a clickable country list with icons next to each ListItem. However, I am facing an issue where only one item can be selected at a time in a single click. Upon clicking a new item, the previously selected one gets deselected first. He ...

javascriptreactjsmaterial-ui

What could be the reason for the mouseleave event not functioning properly?

I have a JSFiddle that is working perfectly. Check out my Fiddle here. In my code, I am trying to make a div change colors when hovered over and then back to its original color when the mouse moves out. It works fine on JSFiddle but not locally. When I r ...

jqueryhtmlcss

Why Am I Still Getting a 431 (Request Header Fields Too Large) Error in My React App Despite Clearing

Whenever I try to run a post request in my React app, I encounter the "431 (Request Header Fields Too Large)" error and I'm unable to identify the cause. Is there anyone who can assist me with this problem? I've attempted various solutions based ...

reactjscookieshttp-headers

Android browser experiences a sudden surge of unexpected data influx

I am facing an issue with my application where it maps an array from the state. The array should ideally only contain 6 sets of data, as limited by the backend. However, sometimes it spikes and displays data that is not supposed to be there or shows old da ...

javascriptandroidreactjsfrontend

ReactJS does not display pagination numbers

I am facing an issue with setting up pagination for a blog I am building using reactjs, graphql, and nextjs. While the react hooks are functioning properly, the page numbers are not showing up on the screen. I have checked the code multiple times but canno ...

reactjsnext.jsgraphqlpaginationtailwind-css

Utilize Dinero.js to implement currency formatting for input fields in React applications

I am currently working on a form in React that requires certain input fields to be formatted as money currency. These inputs should be prefixed with the dollar sign ($), include commas for thousands separation, and have exactly two decimal points. During ...

javascriptreactjstypescriptforms

Incorporate a CSS framework into the Angular vendor bundle

My current situation : The website is built with Angular 4 Started using Angular Starter Kit Utilizing Semantic UI as the CSS framework The challenge I'm facing : Integration of Semantic UI into webpack is not having any impact. Steps I've ...

cssangularwebpack

"Trouble with getting the Twitter Bootstrap dropdown menu to function properly

Currently, I am facing a challenge with my project as the dropdowns on the menu are not functioning properly. Despite having all the necessary files included, it seems like there might be an issue within my code. You can view the page here: (please try t ...

htmlcsstwitter-bootstrap

show every piece of information in the table without the need for pagination

While working with the datatable component from shadcn-ui library, I noticed that it utilizes tanstack table to display the data. The issue is that only 10 rows of data are shown even when there are more than 10 entries. All the data is displayed only if p ...

reactjsshadcnuitanstack-table

I'm currently working on creating an online store using Next.js and TypeScript, but I'm struggling to effectively incorporate my fake product data array into the site

"using client" import Container from "@/components/Container"; import ProductDetails from "./ProductDetails"; import ListRating from "./ListRating"; import { products } from "@/utils/products"; interface I ...

reactjstypescriptnext.jse-commerce

Flexible columns with dynamic maximum width based on percentage

After extensive research, I am turning to stackoverflow for help with a seemingly simple task that has proven difficult to achieve. I have three columns of expandable content and need them to adjust in size proportionally when one or more are expanded. Eac ...

htmlcssmultiple-columnscalculated-columns

What is the earliest React version compatible with @fluentui/react-northstar?

This specific project utilizes react version ^17.0.1 with fluentui/react-northstar. I encountered an error in the package.json file when attempting to run npm i @fluentui/react-northstar. Any insights into what might be causing this issue? Error message ...

reactjswebpackfluent-uifluentui-react

Ensuring Consistent Height for a Responsive HTML Document Across Devices

My html page is facing a problem when printing from different Android devices. The page height changes dynamically based on label updates through JavaScript, and I pass this height to adjust the printed page (approximately 856x3000 pixels). However, issu ...

androidhtmlcssprinting

Having trouble getting my subarrays to push correctly into the parent array in ReactJS. What am I doing wrong

I am currently working on implementing the bubblesort algorithm using ReactJS. My state includes an array of 3 objects initially sorted in descending order by the 'num' property. I have a button on my interface that triggers the bubblesort functi ...

javascriptreactjs