Vertically center the button inside a MaterialUI grid

How can I vertically center align the button within this grid? I've tried using vertical-align but it doesn't seem to work. I'm currently adjusting the vertical position of the button using top: "30%", but I'm looking for a better way to center it.

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

<form className={classes.container} noValidate autoComplete="off">
  <Grid container spacing={1}>
    <Grid item xs={5}>
      <TextField
        id="standard-name"
        label="AWS account"
        className={classes.textField}
        margin="normal"
      />
    </Grid>
    <Grid item xs={7}>
      <Button variant="contained" color="primary" className={classes.button}>
        Link AWS account
      </Button>
    </Grid>
  </Grid>
</form>;

Answer №1

Discover the essential Grid API. Utilize the alignItems property with a value of center. Learn more about the power of flexbox in CSS and refer to the documentation for detailed guidance.

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 position a div in the top right corner of my form using Bootstrap?

I have a form displaying some detailed text about elements in my application. Located outside this form is an "add new item" button that redirects the user to a new page for adding a new item. The current placement of this button is on the upper left corn ...

Having trouble getting the custom font to display correctly in xhtml2pdf for a Django project

I'm having trouble incorporating a custom font into my PDF generated from HTML. Although I successfully displayed the font in an HTML file, indicating that the font path is correct and it's being used properly, the .ttf font type doesn't re ...

Basic jQuery Slideshow Counter

I'm having trouble implementing a text-based horizontal slider on my website that scrolls left and right with mouse control. I want to display the current index of each slide along with the total number of slides (e.g. 1/4) and update the index as use ...

Centering the header image on the screen creates a visually appealing focal point

Looking to design a header image for my website that always stays centered. I want the image to stand out and remain in the middle even when the browser window is resized. I found an example on this website that achieves this effortlessly. ...

"Despite being higher in position, the z-index is causing the element to be placed below

I am currently facing an issue with a dropdown menu that I am trying to add to a WordPress site using Visual Composer. The problem arises when I attempt to place the dropdown on top of a parallax section below it. Despite setting the z-index of the paralla ...

Javascript - issue with accurately retrieving element offset value while scrolling

My goal is to dynamically change classes for elements based on their position during scrolling. I am trying to calculate the top offset element value and adjust the classes accordingly. Here is the function I am using: handleScroll () { const header = ...

Adjusting the height and paddingTop of the Dialog component in Material-UIredirectTo:

I am attempting to dynamically adjust the height of a dialog box in order to ensure all content is fully displayed within it. Additionally, I am looking to decrease the top padding of the modal to maximize available space.... Any suggestions on how I can ...

Align content to the bottom using Bootstrap 4

Looking for help with aligning content to the middle and bottom on a full-page bootstrap layout? The first page has a background image in the first div, and a darker layer on top in the second div. <div class="h-100 w-100"> <div class="h-100 w-10 ...

Having trouble with IE7 - unable to interact with elements below popup form

<script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({publisher:'b42661f5-2dc5 ...

Third party component failing to recognize Material UI theme

I have been diligently working on enhancing the Material UI Rich Text Editor. https://www.npmjs.com/package/material-ui-rte My main focus is to adhere to best practices for React and Material-UI, ensuring that anyone can seamlessly integrate it into thei ...

Highlight the active menu item using jQuery

Check out my menu example here: http://jsfiddle.net/hu5x3hL1/3/ Here is the HTML code: <ul id="menu" class="sidebar"> <li> <a href="#" class="clickme">Menu</a> <ul id="menu1"> <li><a class="dropdown-clas ...

Tips for ensuring the angular FormArray is properly validated within mat-step by utilizing [stepControl] for every mat-step

When using Angular Material stepper, we can easily bind form controls with form groups like [stepControl]="myFormGroup". But how do we bind a FormArray inside a formGroup? Constructor constructor(private _fb: FormBuilder){} FormArray inside For ...

What causes Font Awesome 5 icons to vanish when changing the font-family?

I am facing an issue with the code I have below. It changes the font style successfully, but it also causes the icon to disappear. Can anyone provide tips on how to ensure that the icon remains visible while changing the font style? <link rel="styles ...

Animating the left and right positioning of a single element using CSS transitions

I am currently working with the following CSS code: #masthead { transition: left linear 0.25s; -moz-transition: left linear 0.25s; -o-transition: left linear 0.25s; -webkit-transition: left linear 0.25s; -ms-transition: left linear 0.2 ...

What is the best way to display Bootstrap dynamic tabs in a single row without them overflowing and requiring a scroll button to access all the tabs

Is there a way to dynamically display Bootstrap tabs? I want the content in the tab to show when the link is clicked, and also have a close button. I need the tabs to be aligned in a single row without wrapping down if they don't fit. Here's an ...

Can custom action buttons be added to mui tables?

I'm currently working on a table that pulls data from an API and presents it in either an MUI table or Material table. I would like to have different action buttons displayed for each row - for example, in the first row, the button should read "connec ...

Saving the output of an AngularJS expression in an input field

Looking at the calculations below, I am currently evaluating an expression, {{ annualIncome * 4.5 }}, in one input and then re-evaluating the same expression in another input. Instead of saving the result and transferring it to the other input, I am repeat ...

Issues with positioning images using media queries

Can anyone help me center an img when the viewport width is 320px? I've attempted different approaches but so far, nothing has been successful. .logo { width: 55px; height: 55px; margin: 10px 0 10px 30px; float: left; } @media only screen a ...

Transforming global CSS into CSS modules: A step-by-step guide

In my nextjs project, I am utilizing react-bootstrap and bootstrap which requires me to include the global css: // _app.js import 'bootstrap/dist/css/bootstrap.min.css'; The issue arises when loading a significant amount of unused css on every p ...

Is there a way to reposition the arrows in this Bootstrap 5 accordion to appear ahead of the text?

Here's an example from Bootstrap 5 web page that I've been working with (https://getbootstrap.com/docs/5.0/components/accordion/). My query pertains to positioning the arrows before the text in the accordion items. Despite attempting various appr ...