CODEWITHSUNDEEP
cssreactjstypescriptmaterial-ui
Mahdi
Mahdi

Reputation: 2279

Material UI: How to vertically centre align an icon button?

I have this tsx piece of code to show a text box and an icon button to add something:

<TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
            <IconButton aria-label="delete">
                <AddCircleOutlineOutlinedIcon />
            </IconButton>

The output is like this: enter image description here

As you can see, the "+" icon is not vertically aligned with middle of the textbox. I tried adding padding to the button but it ruins the circle that is shown when mouse is hovering and makes it like an oval:

<TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
            <IconButton aria-label="delete" style={{paddingTop: 19}}>
                <AddCircleOutlineOutlinedIcon />
            </IconButton>

enter image description here

How can I say "all of these elements should be aligned"?

Upvotes: 1

Views: 4422

Answers (1)

hotcakedev
hotcakedev

Reputation: 2504

You can easily use Box component and flexbox.

<Box
  display="flex"
  alignItems="center"
>
  <TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
            <IconButton aria-label="delete">
                <AddCircleOutlineOutlinedIcon />
            </IconButton>
</Box>

It supports all system properties.

Upvotes: 2

Related Questions