How can I position a Button at the center of my Grid item using Material UI?

In my React 16.13.0 application, I am utilizing Material UI's Grid and trying to center the content of a button in the middle of a row. Here is what I have tried:

center: { alignItems: "center", width: "100%", }, halfRow: { width: "50%", }, ...

      <Grid item className={classes.halfRow}>
        <Button size="medium" onClick={startMission} className={classes.center}>
          <Grid container direction="row" spacing={1} style={{ width: "100%", alignItems: "center" }}>
            <Grid item>
              <PlayCircleFilledIcon />
            </Grid>
            <Grid item>START</Grid>
          </Grid>
        </Button>
      </Grid>

However, the button doesn't align in the center as expected.

https://i.stack.imgur.com/fRLGg.png

What CSS styling should I use to ensure everything is centered in the middle of the cell?

cssreactjsmaterial-uialignmentcenter

Answer №1

When using Grid, you have the option to pass in justify and alignItems as a prop, allowing you to easily center your content

 <Grid item className={classes.halfRow}>
    <Button size="medium" onClick={startMission} className={classes.center}>
      <Grid container direction="row" spacing={1} alignItems={'center'} justify={'center' }style={{ width: "100%" }}>
        <Grid item>
          <PlayCircleFilledIcon />
        </Grid>
        <Grid item>START</Grid>
      </Grid>
    </Button>
  </Grid>

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

What is the best way to update a React state with JSON data?

Currently, I am dealing with a React component that sends a post request to an Express server hosted by myself. The server employs web3 for signing transactions on the Ethereum blockchain. Upon successful inclusion of the transaction in a block, a JSON obj ...

reactjsjsonexpressweb3js

Is it possible to create HTML tables without including paragraphs within the cells using docutils rst2html?

If my input rst file looks like this: +--------------------------------+ | Table H1 | +-------------+------------------+ | Table H2a | Table H2b | +=============+==================+ | a1 | b1 | +------ ...

pythonhtmlcssrestructuredtext

Is there any HTML code that is able to implement a currency format identical to the one we've customized in Google Sheets/Google Apps Script

I am currently working with a Google Sheet table that consists of 2 columns. The second column contains charges which can vary based on user input through a Google Form and are summed up using GAS. To view an example, click here. The data from this Googl ...

javascripthtmlcssgoogle-apps-scriptnumber-formatting

Using Material-UI's <Autocomplete/> component and the getOptionLabel prop to handle an empty string value

Currently, I am working with material-ui autocomplete and passing an array of states to its options property. However, I have encountered an issue with the getOptionLabel method: Material-UI: The `getOptionLabel` method of Autocomplete returned undefined ...

javascriptreactjsmaterial-uireact-hooks

Looking to showcase website HTML code by simply clicking on a banner image?

I am looking to implement a feature where banner HTML code is displayed in a popup on website when the banner is clicked. For instance, an example of a banner could be: <img src="https://myweb.com/images/banners/1.gif"> Upon clicking the banner im ...

javascripthtmlcss

Is there a way to utilize PHP/HTML to exhibit a diverse array of random images as dynamic background visuals?

I'm currently learning the process of constructing a website. I've successfully constructed the index page, and below you will find the PHP and HTML code: <?php session_start(); $pngFiles = array('image1.png', 'image2.jpeg' ...

phphtmlcss

Tips for integrating styled components with Material UI icons

Is there a way to style the override "! if it's not working?" I couldn't find any solutions online. import React from 'react'; import styled from 'styled-components'; import SearchIcon from '@material-ui/icons ...

reactjsmaterial-uistyled-components

Troubleshooting mat-accordion title problem on mobile devices

Despite reading numerous blogs and conducting extensive searches on Google, I am still unable to resolve the CSS issue related to Angular material below. Your assistance in fixing this problem would be greatly appreciated. Desktop view: https://i.stack.im ...

htmlcssangularangular-material

Enhance your SVG image in D3 by incorporating a drop-shadow effect

Trying to apply a drop-shadow effect to an SVG image using D3. Check out my code below and see the example block here: var imgurl = 'http://www.logo-designer.co/wp-content/uploads/2015/08/2015-Penn-State-University-logo-design-4.png'; var mar ...

javascriptcssd3.jssvg

Use React to increment a variable by a random value until it reaches a specific threshold

I am currently working on creating a simulated loading bar, similar to the one seen on YouTube videos. My goal is for it to last 1.5 seconds, which is the average time it takes for my page to load. However, I have encountered an issue with the following co ...

javascriptreactjs

Identifying elements using xpath - Streamlined Xpath Techniques

I successfully found the element using the xpath copied directly from the code. Can someone assist me in creating a simpler xpath for the following code snippet, which is fully functional! WebElement oCheckbox = myDriver.findElement(By.xpath(".//*[@id=&ap ...

javahtmlcssxpathselenium-webdriver

Sliding off the canvas - concealed navigation

I have implemented CSS to hide a menu on mobile: #filter-column { position:absolute; left:-400px; } However, I want the menu to slide in from the left when the user clicks a link, and everything else should be hidden. When the layer is closed, th ...

javascriptjqueryhtmlcss

Using CSS units such as vw, vh, or percentage to specify height is not possible

In my Ionic app, I am adjusting the width and height of a div based on the viewport dimensions. This setup functions correctly on the browser and Android 4.4 devices. However, it does not work as expected on Android 4.2 (the height is constrained to the te ...

androidcsscordovaionic-framework

Optimizing the usage of override Button with Box component in Material-UI

Recently, I've been delving into the Box component in material-UI (https://material-ui.com/components/box/#box) and attempting to understand and write code for it. Specifically, I've been experimenting with overriding a Button component using th ...

reactjsmaterial-ui

Steps to set up React on Command Prompt through npm

When installing create-react-app globally using npm, you may encounter warnings and issues that require your attention. For example, the version of tar being used is deprecated and no longer supported, with potential security vulnerabilit ...

node.jsreactjs

Equal spacing title in horizontal menu with Bootstrap design

Is there a way to evenly distribute menu links with varying text lengths in equal width bootstrap columns? Adjusting the column class between col-md-1 and col-md-3 doesn't seem to give accurate spacing. If you want to see, I've set up a fiddle h ...

csstwitter-bootstrap

Dealing with CSS overflow issues in Safari, Chrome, and the ancient IE 6

Are Safari and Chrome compatible with overflow? How does IE 6 or higher handle overflow? ...

css

What is the best way to customize the appearance of the material-ui select component using styled-components instead of material-ui classes in a React

I've been facing some challenges while trying to style my material-ui select component using styled-components instead of material- classes. The version I am working with is material-ui/core 4.12.3. When I use the old makeStyles component from materi ...

cssreactjsselectmaterial-ui

Passing state between renderCell components in Material UI Data Grid can be achieved by utilizing props and lifting

Is there a way to dynamically adjust the menu items in one select component based on the selection made in another select component within a DataGrid? I'm struggling with passing the state of one select component to the other, especially when utilizin ...

reactjsmaterial-uimui-x

Can a user be redirected from one page to the bottom of a different page using React?

Is there a way to redirect from one page to another in React and automatically scroll to a specific section when a button is clicked? const navigatePage = () => { if(window.location.pathname !== '/target-page'){ window.location.assign ...

reactjsreact-routerwindow.location