My goal is to center 3 navigation tabs in the middle of my page and have a dropdown on the far right for sorting. I managed to get the dropdown on the far right, but I'm having trouble perfectly centering the 3 navigation tabs inside the <Box> <Box/> component.
Here is an image illustrating what I'm trying to achieve: https://i.stack.imgur.com/RDJrD.png
You can view my code sandbox here: https://codesandbox.io/s/45159071-how-to-align-a-component-to-the-center-right-forked-0y60s3?file=/demo.js
<Grid
container
sx={{ marginTop: 3, marginBottom: 3, alignItems: 'center' }}
>
<Box
sx={{ marginRight: 'auto' }}
>
<Tabs
value={activeMenuTab}
onChange={handleChangeTab}
>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
<Tab label="Tab 3" />
</Tabs>
</Box>
<Grid
item
xs
style={{ flexGrow: 0 }}
>
<FormControl
sx={{ minWidth: 150 }}
size="small"
>
<InputLabel id="sort-by">Sort By</InputLabel>
<Select
labelId="sort-by"
value={selectedValue}
label="Sort By"
onChange={handleSorting}
>
<MenuItem value="oldest">Oldest</MenuItem>
</Select>
</FormControl>
</Grid>
</Grid>
I came across a similar post that uses pure CSS for alignment, but I struggled to implement it with MUI components: Center one and right/left align other flexbox element