Vertical alignment in material-ui's Grid component is not functioning as expected

I have been working on this code snippet to center a button both vertically and horizontally. However, it seems like the button is not positioned correctly along the vertical axis. Any advice or guidance would be greatly appreciated!

Could someone assist me in troubleshooting this issue?

import React from 'react';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';

function App() {
  return (
        <Grid container direction="row" justify="center" alignItems="center" justifyContent="center">
          <Grid item>
            <Button variant="contained" color="primary">Hello</Button>
          </Grid>
        </Grid>
  );    
} 

export default App;

Answer №1

Check out this code snippet.

import React from "react";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";

function App() {
  return (
    <Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justify="center"
      style={{ minHeight: "100vh" }}
    >
      <Grid item>
        <Button variant="contained" color="primary">
          Hello
        </Button>
      </Grid>
    </Grid>
  );
}

export default App;

https://codesandbox.io/s/great-nash-8o2ke

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

Eliminate empty space in the table cell

I am working with a table that looks like this: <table> ... <td> <div class="btn-group btn-group-sm"> <button class="btn btn-info mini"><span class="glyphicon glyphicon-duplicate"></span></button&g ...

switch out asterisk on innerhtml using javascript

Is there a way to replace the asterisks with a blank ("") in the innerHTML using JavaScript? I've attempted this method: document.getElementById("lab").innerHTML = document.getElementById("lab").innerHTML.replace(/&#42;/g, ''); I also ...

How to eliminate the hash from a particular page in VueJS

My dilemma is quite similar to the one discussed in this Vue router thread on removing hash on certain pages I need to configure the hash mode for all pages except for mysite.com/success. This specific page is accessed via redirect from ...

How to Left Align Div Centered Within Another Div?

I've encountered an issue with centering icons in my HTML code. Despite trying to fix it myself, the icons always appear left-aligned. I would greatly appreciate any assistance from the helpful members of this community. It's likely a simple fix ...

Can floated divs be prevented from collapsing without taking up any width?

Let's discuss an issue that is not related to block elements collapsing when their children are floated, and has nothing to do with clearing at all. Imagine having a set of floated divs like: <div class="column">Column 1</div> <div cl ...

Performing multiple http requests in a loop and combining the retrieved data using AngularJS

I am currently working with a piece of source code that looks like this: var projectPromises = $http.get('http://myapi.com/api/v3/projects?private_token=abcde123456'); $q.all([projectPromises]).then(function(data) { console.log(data); ...

What is the best approach to updating multiple rows instead of just the first row using the update button located on both sides using PHP and AJAX?

Starting fresh, so I might sound like a beginner with this question. How can I make use of the update button to update specific rows instead of just the top row? Every time I try to update, it only works for the top row. Here's the code snippet from ...

Locate all elements in an array that contain a particular value for a specific key using Javascript

In my JavaScript data, I have two arrays: ARRAY ONE: [ TextRow { v_id: 3000 }, TextRow { v_id: 3001 }, TextRow { v_id: 3002 } ] ARRAY TWO: [ TextRow { s_id: 'S001', v_id: 3000, type: 'control' }, TextRow { ...

CSS - Struggling to identify the source of unwanted horizontal scrolling?

Recently, I've been attempting to make adjustments to a responsive website that utilizes media queries. Despite my efforts, whenever the site is viewed on a mobile-sized screen, it consistently requires horizontal scrolling regardless of the screen&a ...

Issue in MUI V5: MakeStyles styles being overridden

After recently updating to version 5.0.0-alpha.25 (moving from 5.0.0-alpha.10), I've encountered an issue with makeStyles not working properly. Despite checking for any breaking changes, I couldn't find anything related to this specific problem, ...

Implementing a modal component into a React JS page upon loading

I've been working on a webpage using React JS. The site's structure follows MainContent.js --> Main.js --> ReactDOM render. I recently tried to implement a modal popup that worked perfectly in its own project, but ran into issues when impor ...

What is the best way to utilize a React type as props for a custom component?

To make my component work properly, I am required to pass the inputmode as props from an external source. The acceptable values for <input inputMode=<valid values>> are outlined in the React types (node_modules@types\react\index.d.ts) ...

Advanced data synchronization with Angular 7's bidirectional data binding feature

One input box allows users to enter a number, and I would like to adjust the width of the background color based on that number. The box itself will have a fixed width, but I am looking to dynamically change the width of the background color according to ...

Getting the id of a single object in a MatTable

I'm currently working on an angular 8 application where I've implemented angular material with MatTableDatasource. My goal is to retrieve the id from the selected object in my list: 0: {id: "e38e3a37-eda5-4010-d656-08d81c0f3353", family ...

Locate the nearest upcoming date and time to today's date in the JSON response

I am currently working with an API that provides a response containing the `start_time` field in JSON format. My goal is to extract the ID from the JSON object whose next date time is closest to the current date and time, excluding any dates from the past. ...

Create a custom button in Material-UI using Styled-components, and integrate it with React

I'm currently working on a project using React, TypeScript, and styled components along with the material-ui library. I have created styled material-ui buttons as shown below: import React from 'react' import styled from 'styled-compone ...

Express is encountering a non-executable MIME type of 'text/html' with Webpack

My express application setup is as follows: const express = require("express"); const app = express(); const server = require("http").Server(app); const path = require("path"); const port = process.env.PORT || 5000; app.use(& ...

Adjusting image dimensions dynamically using JavaScript based on screen size

My bootstrap setup seems to be causing issues when using the @media (min-height: 1000px) rule as the image class does not respond as expected. I am looking to implement a JavaScript solution that will automatically resize images once the screen height exc ...

Updating the variables of HTML components using JavaScript after making an AJAX request

I am using ajax to fetch a list of user data. But after this ajax call, I need to display the data in an HTML structure like a datasheet for each user. My question is how can I store the HTML code in a functional and elegant way to maintain readability and ...

Choose a procedure to reset to the original setting

I'm attempting to achieve something that seems straightforward, but I'm having trouble finding a solution. I have a <select> tag with 5 <option> elements. All I want to do is, when I click a button (which has a function inside of it), ...