Reactjs 将项目在中心和右端对齐

我想将以下两个项目对齐：

第一个排在中间的第一排。 第二个，与第一个在同一行，但在远端

我试过这个：

  <Grid container alignItems="center" justify="center">
    <Grid item>
      <Typography variant="subtitle2">
        4 / 4
      </Typography>
    </Grid>
    <Grid
      container
      alignItems="flex-start"
      justify="flex-end"
      direction="row"
    >
      <IconButton>
        <HelpOutlineIcon />
      </IconButton>
    </Grid>
  </Grid>

4/4

但我得到：

---

基本上，我希望问号图标位于同一行4/4的最右侧，如黑色箭头所示。

一个选项是伪造它并在开始处放置一个空白

，然后你有3个div，可以轻松地用

对齐内容：空格之间的

另一种方法是用
绝对值
定位问号，确保父对象是
位置：相对的
，然后将
顶部：Xpx
和
右侧：Xpx
应用到问号上，其中
X
是您希望为其提供的间距像素量
一个选项是伪造它，并在开始处放置一个空白的
，然后您有3个div，并且可以轻松地带
内容对齐的空格：介于

另一种方法是用
absolute
定位问号，确保父对象是
position:relative
，然后将
top:Xpx
和
right:Xpx
应用到问号上，其中
X
是要为间距指定的像素量我添加了一个临时div并对正=“间隔。这对我起了作用

<Grid container alignItems="center" justify="space-between">
  <div></div>
  <Typography variant="subtitle2">4 / 4</Typography>
  <IconButton>
    <HelpOutlineIcon />
  </IconButton>
</Grid>


4/4
我添加了一个temp div和justify=“space between。这对我来说很有用

<Grid container alignItems="center" justify="space-between">
  <div></div>
  <Typography variant="subtitle2">4 / 4</Typography>
  <IconButton>
    <HelpOutlineIcon />
  </IconButton>
</Grid>


4/4
Prova12，我的答案对你有帮助吗？如果正确，你能标记它吗？让我知道！Prova12，我的答案对你有帮助吗？如果正确，你能标记它吗？让我知道！