Menu
How do I get a material UI button to left align the label? There are no props to directly change the inline-styles on the button element and the only way I can figure to do this is to add a class and write some gross css selector like thisClass > div > button.
http://www.material-ui.com/#/components/raised-button
672
Left, Right, and Center Align Button Using CSS Text Align Property To align the button to the left position, you have to use the CSS text-align property with left as its value and place the button inside the <div> element.
Well, you have to first wrap the buttons inside the div element and use the Bootstrap classes given below to align the buttons:- 1 .text-left: Use to align button to the left position. 2 .text-center: Use to align button to the center position. 3 .text-right: Use to align button to the right position.
Example of right aligning labels next to inputs with the text-align property: We can remove the text-align property, and the labels will be left-aligned by default. Let’s see an example, where we also add placeholder, id and name attributes on inputs and for attribute on labels. As a result, the input will be activated when a label is clicked.
Left Align Button. Right Align Button. Probably, you may also like to adjust the button to the center position. The CSS text-align property can also be used to set the button to the center position. You have to use center as the property value and place the button inside the <div> element to move the button to the center position.
I had a similar issue with buttons that have an icon. I fixed it by justifing the content:
<Button
startIcon={<AccountCircleIcon/>}
fullWidth={true}
style={{justifyContent: "flex-start"}}>
button text
</Button>
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
