Menu
I have googled for many hours to find a solution, but it seems to be very difficult to vertically align text within a tablecell. I am confused as to why they make the horizontal alignment easy, while the vertical alignment is that difficult.
<TableCell colSpan={2} align='center' vertical-align='top' >
<Typography variant="h5" gutterBottom >
Task
</Typography>
</TableCell>
270
To place an item at the top or bottom of its cell, insert the "VALIGN=" attribute within the code for that cell. To vertically align an entire row (e.g., placing all data in that row at the tops of the cells), insert the "VALIGN=" attribute within the code for that row.
The Typography component of Material UI is used to present your text and content as clearly and efficiently as possible. Import: import Typography from '@material-ui/core/Typography'; // OR import { Typography } from '@material-ui/core'; Syntax: It sets the alignment property.
Add CSS. Set the border for the <table> and <td> elements. Add the height and width properties for the <td> tag. Set the text-align property to "center", and the vertical-align to "middle" for the <td> tag.
The TableCell component from material-ui doesn't provide such vertical-align prop, only align. To change vertical align of TableCell you have to pass a style prop (or a className), like that:
<TableCell colSpan={2} align="center" style={{ verticalAlign: 'top' }} >
<Typography variant="h5" gutterBottom >
Task
</Typography>
</TableCell>
Any props that TableCell doesn't know is passed to it's children root (th element in this case), and in JSX you can pass a inline style with the prop style and a camelcased object.
186
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
