Menu
I am using the Material-UI library for React. I am trying to make a simple form that looks like:
However, I can't figure out how to align the button with the TextField.
I tried changing the margin-top but it increases the margin of the entire wrapper.
Below is the code sandbox for it.
Any tips on getting this fixed?
https://codesandbox.io/embed/material-demo-y5eg7?fontsize=14&hidenavigation=1&theme=dark
424
The Typography component can be vertically centered by adding display: 'flex' and alignItems: 'center' . In the Box component (and all components except Stack), default flexDirection is 'row'.
We can align the buttons horizontally as well as vertically. We can center the button by using the following methods: text-align: center – By setting the value of text-align property of parent div tag to the center. margin: auto – By setting the value of margin property to auto.
To center a component horizontally and vertically in React. js, set its display property to flex and its alignItems and justifyContent properties to center . The components's content will be horizontally and vertically centered. Copied!
Float Right or Left in MUI with Justify Content With display=”flex” applied to the MUI Box component, we can use justifyContent=”space-between” to move a Button to the far left and to the far right.
In your styles.css file you can add {position: relative; top: 10px} to the small-button className then adjust the top value until you are happy with the position alternatively you might be able to wrap the row in a div and use {display:flex; flex-direction:row; justify-content:center;} to align them all.
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
