The button is not centered within the grid container

I need assistance centering the button within a Grid layout using Material-UI

<Grid container style={{backgroundColor:'green'}} alignItems="center" justify="center" >
    <Grid alignItems="center" justify="center" item xs={12} 
    style={{margin:'auto',width:"100%",backgroundColor:'white'}}>
        <Button variant="contained" style={{margin:'auto'}}>
          Next
        </Button>
    </Grid>
</Grid>

Even after applying alignment properties, the button remains on the left side.

Any suggestions on how I can achieve proper centering?

https://i.sstatic.net/ly4SD.png

htmlcssmaterial-ui

Answer №1

This example has been updated to make it more concise. By using xs={12}, the inner Grid column width is set. Since the grid layout is used, only include alignItems="center" and justify="center" for center alignment on both axes.

<Grid container style={{ backgroundColor: "green" }} alignItems="center" justify="center" direction="row">
     <Grid item>
         <Button variant="contained" style={{ margin: "auto" }}>
            Next
         </Button>
     </Grid>
</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

Is it possible to have the navigation bar (bootstrap) appear on top of my slider as the default setting, without taking up additional space?

I'm encountering a rather simple issue that's giving me some trouble. I'm currently working on a website design using Bootstrap, and initially, there were no image sliders included by default. After integrating an image slider, I noticed th ...

htmlcssbootstrap-4

How to Customize Background Colors for Blogspot Posts?

Recently, I started my own blog using Google Blogger and I've run into a minor issue. Despite applying a background image for the entire blog, all of my posts have a white background instead. I haven't used any background-color in the HTML code o ...

htmlcssbloggerblogger-dynamic-views

Is there a way to replicate a change in value on a Material UI Slider?

I'm currently testing a state change using React Hooks (useState) by simulating a value change on a Material UI slider to trigger my hooks state update function. However, I'm facing an issue when trying to verify the change by checking the displa ...

reactjsmaterial-uienzymereact-hooks

The LESS file could not be located. Attempted to find -

My directory structure is as follows: C:. └───static ├───custom_stuff │ presets.css │ presets.less │ └───index index.less However, I'm encountering an issue where index.less c ...

cssless

Unable to adjust the padding of a div while the Bootstrap 4 navbar is in a collapsed state on mobile devices

I am facing an issue with a fixed navbar at the top of my page. Below the navbar, I have the page content which includes a Bootstrap 4 image carousel. The problem arises on mobile devices where I need to add top-padding to the page-container (below the nav ...

javascripthtmlcssbootstrap-4carousel

The submenus in the jQuery menu within the dialog box are not displaying as

My current setup includes a jquery menu with sub menus within a jquery dialog. You can see it in action here: http://jsfiddle.net/pnmpn25/VPXjs/17/ $("#menu").menu(); $("#dlg").dialog(); The issue I'm facing is that when I open a sub menu, it gets ...

jquerycssjquery-ui-dialogjquery-ui-menu

Conceal a div element using a button through JavaScript

I've been scouring various online resources for solutions, including Stack Overflow and W3Schools, but I haven't had any luck so far. Here's a simplified version of my current code: <script language="javascript"> function remove() ...

javascripthtmlblockdisplay

Can you explain the significance of this HTML code?

While examining some source code, I came across the following: <div class="classname {height: 300px; width: 200px}"></div> I am aware that element styling can be done using the style="" attribute. Could you explain what this code snippet sig ...

javascripthtmlcss

The margin-top property in CSS is not functioning as intended for a specific pixel value when applied to

I'm having trouble with positioning an icon using margin-top: -35px; under #menu. When I click on the icon, the side navigation bar doesn't work properly. However, if I adjust it to -15px, the side navigation bar displays correctly. Can someone h ...

javascripthtmlcss

Challenges Arising from CGI Scripts

One requirement for the user is to input text into a designated text field within a form element in my HTML. Following this, a CGI script processes the user's input and JavaScript code is responsible for displaying the processed information. JavaScri ...

javascripthtmlajaxperlcgi

What is the method for linking images to URLs in my carousel?

I am in the process of revamping a confluence page that showcases a variety of visualizations. Here is the code snippet I am currently working with: <div class="carousel"> <img src="image1.jpg"> <img src="i ...

javascripthtmlcssmacrosconfluence

How can you ensure an element's height matches its width within an Ionic framework?

I am currently creating an application using the Ionic framework, and I am looking to set a square image as the background. The challenge is to ensure that the image scales appropriately for different screen resolutions; ideally, it should occupy the full ...

javascriptcssangularjsangularjs-directiveionic-framework

Adding text after a div in React-JS using Bootstrap: A quick guide

Just starting out with website development and I have a question. As I practice making this website, I am struggling to figure out how to add the text "To know more about us click here" below the 'Get started' button. I tried adding a simple < ...

javascripthtmlcssreactjsbootstrap-4

The <transition> element is not being recognized by VSCode

It seems like my VSCode is highlighting the transition element in red, indicating that it may not be recognizing this element. I'm a bit perplexed by what's happening here. Moreover, the code isn't functioning as expected because there is no ...

javascripthtmlvue.jstransition

Display a button within a table depending on the content of adjacent cells

Below is the code snippet I'm currently working with: <tbody *ngIf="packages"> <tr *ngFor="let package of packages"> <td class='checkbox'> <label class="css-control css-co ...

javascripthtmlangular

Ways to determine if a textbox is empty and trigger a popup notification with jQuery

I'm having trouble with checking if the textbox is empty in my form. Every time I try to submit, instead of receiving an alert message saying "Firstname is empty," I get a message that says "Please fill out filled." ('#submit').click(func ...

javascriptjqueryhtmlformstextbox

Challenges with implementing CSS transitions

I've been delving into CSS3 transitions, and I'm encountering some confusion. I can't tell if I'm misunderstanding something or if it's the browsers causing issues. Initially, I believed Opera had transition support starting from ...

cssoperacss-transitions

The elements of the second flex item should also be arranged in a line next to each other

<script src="https://use.fontawesome.com/2a2c577e07.js"></script> <div class="parent-flex"> <div class="class1">Class 1</div> <div class="class2"> <img src="http://farm4.static.flickr.com/3140/3506456511_43787 ...

htmlcssflexbox

Discrepancy in Angular Material Buttons with theme design

I recently installed Angular 10 along with Angular Materials using the command ng add @angular/material I opted for the custom theme: Purple/Green The next step was to add a Toolbar by simply copying and pasting code from Google's site. However, I a ...

cssangularangular-material

Tips for employing e.preventDefault within the onChange event handler for a select element

Is there a way to prevent the select tag value from changing using preventDefault? I have successfully prevented input from changing the value with event.preventDefault, but have not been able to do the same for the select tag. Here is an example code sni ...

javascripthtmlselectdom-eventspreventdefault