Content in Material UI Card is not aligning to the center

I'm currently working with Material UI and have successfully created a card. My goal is to center the text both horizontally and vertically within the card. However, I am facing an issue where the text remains stuck at the top of the card instead of being centered. I have reviewed Material UI documentation but am unable to figure out why the text alignment is not working as expected.

Code

<Card className={classes.root}>
  <CardContent className={classes.bigCard}>
    <Grid 
      align="center"
      container
      direction="column"
      justify="center"
      spacing={0}
      style={{ backgroundColor: 'teal' }}
    >
      <Grid item style={{ backgroundColor: 'yellow' }}>
        <h1>hey</h1>
      </Grid>
    </Grid>
  </CardContent>
</Card>
javascripthtmlcssmaterial-ui

Answer №1

For your primary outer Grid component, give this a try: 

<Grid 
  direction="column"
  justify="center"
  alignItems="center"
  spacing={0}
  style={{ backgroundColor: 'teal' }}
 />

I'm unsure why there is a Grid within another Grid, but it seems that the Grid components utilize the Flexible CSS model internally. This suggests they leverage flexbox for their properties. The most effective way to center content with flexbox is as follows: 

<ContainerDiv 
  styles={{
     display: 'flex', 
     alignItems: 'center', 
     justifyContent: 'center'
}}>
  <Content> This content will be centered </Content> 
</ContainerDiv>

This resource provides valuable insights: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Material UI is influenced by these concepts.

I hope this assists you in achieving your alignment goals. :)

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

Organizing Angularjs ng-repeat based on date

I am still learning AngularJS and could use some assistance. In my application, I have a table with the following information <table> <tr> <th><span ng-click="sortType = 'first_name'; sortReverse = !sortReverse">Refer ...

pythonhtmlangularjssorting

Shifting the Ion Menu side dynamically based on screen size: A step-by-step guide

Working with Ionic 4, I encountered the need to dynamically change the side property of ion-menu. On larger screens, ion-menu is always visible or static, whereas on smaller screens, it remains hidden until the user clicks on the ion-menu-button. My goal i ...

htmlangulartypescriptionic-framework

using jquery to select elements based on their data attribute values

I have a question about using jQuery to select an object with a specific data value. For instance: $('[data-infos-parent_id=0]').html('it ok'); <div class="question" data-infos='{"parent_id":0,"my_id":0, "title":""}'> ...

jqueryhtmlobjectjquery-pluginsselector

Utilize Node JS to assign variables to HTML form inputs

Can anyone help me with storing HTML form inputs in variables using Node JS? I'm having trouble getting it to work properly. Below is the HTML form snippet: <form action="localhost:8080/api/aa" method="post"> <input id="host" type="text ...

javascripthtmlnode.jsexpress

The error message states that the provided callback is not a valid function -

I seem to be encountering an issue with the code snippet below, which is part of a wrapper for the Pipl api: The main function here performs a get request and then retrieves information from the API Any assistance in resolving this error would be greatly ...

javascriptjquerynode.jsnpmcallback

Automatic suggestions for my personalized npm module (written in ES6/Babel) in Webstorm

When I utilize the material-ui package in Webstorm, I am able to experience helpful auto-completion using the ctrl+space shortcut: https://i.stack.imgur.com/Pivuw.png I speculated that this feature may be attributed to the inclusion of an index.es.js fil ...

javascriptintellij-ideanpmecmascript-6babeljs

"Enhanced Bootstrap 4 table featuring a single column that stands out in size compared

I have set up a Bootstrap4 table with multiple columns, but I need one of them to be larger in order to accommodate more text. I want to specify the minimum width for this larger column and let Bootstrap4 adjust the sizes of the other columns accordingly. ...

cssbootstrap-4

Issue with Firebase Storage: Invalid character detected in the string format 'base64'

I am currently developing a project using react-native and I am facing an issue with uploading an image to Firebase using Firebase Storage. To select the image from the phone, I am utilizing react-native-image-picker, which provides me with the base64 enco ...

javascriptandroidfirebasereact-nativefirebase-storage

Passing a Ruby session variable to a JavaScript tag: a step-by-step guide

I'm currently collaborating with a vendor who utilizes a JavaScript tag for sale attribution, and I need to pass session variables to the tag. The tag appears to be firing properly, as I can see the variables in the logs, but they aren't reflecte ...

javascriptrubytagshaml

Glitchy/Crazy CSS3 Animations

Currently, I am developing a website at . One of the features I have implemented is CSS3 transitions for route changes, but this feature only works in Chrome. Here's how the animation works: I apply the .preanimate class to rotate the phasing out di ...

javascriptjquerycsscss-transitionscss-animations

Attempting to retrieve information from two separate databases using PHP

For a school project, I am developing a booking system and encountered a problem that I am unable to solve on my own. Your assistance in resolving this issue would be greatly appreciated :) Below is the PHP code used to retrieve data from the database (fo ...

phphtmlmysqlsqldatabase

Despite being installed, the message 'concurrently: command not found' pops up

I'm attempting to run two scripts simultaneously, and I came across the concurrently package that is supposed to assist with this. After executing npm install concurrently --save and verifying it in my package.json, I faced an issue when trying to run ...

javascriptnpmcreate-react-app

Words not within the span, away from the span border

I’m currently in the process of creating a dedicated section on my website called "Voices of the Nation,” which draws inspiration from the foundations laid out in the U.S. Constitution. The objective is to highlight individuals who have shown their sup ...

htmlcsslayoutfonts

The ng-model-options in Angular 2 is set to "updateOn: 'change blur'"

Currently working with angular 2, I am seeking a solution to modify the behavior of ngModel upon Enter key press. In angular 1.X, we utilized ng-model-options="{updateOn: 'change blur'}". How can this be achieved in angular 2? For reference, her ...

javascriptangularjsangulartypescript

Navigating through two nested arrays in JavaScript to access an object

Having difficulty extracting the nested car values using JavaScript (lodash). Take a look at the JSON data below: { "cars":[ { "nestedCars":[ { "car":"Truck", "color" ...

javascriptarraysjsonlodash

Having trouble importing components in NativeScript Vue?

I am just starting to explore the world of NativeScript and working on my first project using it. I am facing an issue while trying to incorporate a header component into my main App. Unfortunately, when I run the iOS emulator, the header does not appear o ...

javascriptvue.jsnativescript-vue

Error: Angular ng-file-upload successfully uploads file, but Node.js fails to receive it

Currently, I am working on loading and cropping a file using Angular. Many thanks to https://github.com/danialfarid/ng-file-upload SignUp2ControllerTest -- $scope.upload --> data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAg ...

javascriptangularjsnode.jsexpress

What could be causing the Google API to malfunction in my Universal Windows App?

Error: 0x800a138f - JavaScript runtime error: Unable to access 'setApiKey' property of undefined or null reference Hello, I am struggling to make this work on my Universal Windows App. There is a sample for Google's URL shortener with instr ...

javascriptwindowsgoogle-apiwin-universal-appuwp

Displaying a success dialog after closing a Bootstrap modal

I have set up a bootstrap modal containing a form. Upon submitting the form, the form content is hidden and a bootstrap alert message is displayed. However, upon clicking the bootstrap popup, the same alert message is shown in the popup instead of displayi ...

jqueryhtmlcsstwitter-bootstrap

What is the best method to bring in an HTML list into R programming?

I am trying to import a comprehensive list of banks in Cambodia, including their homepage, address, and other details into R. Although I have attempted the code below, it is not working: url <- "https://www.abc.org.kh/member-list/" html <- ...

htmlrimport