Question

我正在使用Material UI的Grid组件来连续显示三个项目。我想将项目垂直对齐到中心，但是这样做的时间令人失望，令人失望。显然，“ justifyContent：'居中'”仅将项目水平居中。我发现了这个

const styles = (theme) => ({
  root: {
    textAlign: "left",
    margin: theme.spacing(2),
    paddingBottom: theme.spacing(1),
    color: theme.color.secondary,
  },
  cardHeader: {
    paddingBottom: theme.spacing(0),
  },
  cardContent: {
    width: "100%",
    paddingBottom: theme.spacing(1),
  },
  rowBody: {
    width: "100%",
    flexWrap: "nowrap",
    alignItems: "center",
    justifyContent: 'center',
  },
...
      <CardContent className={classes.cardContent}>
        <Grid container className={classes.rowBody} spacing={1}>
          <Grid item>
            <img height="20" src={require('../../img/apple.svg')} alt="" />
          </Grid>
          <Grid item>
            {title}
          </Grid>
          <Grid item className={classes.infoIcon}>
            <InfoIcon />
          </Grid>
        </Grid>

产生以下内容。

如何垂直对齐项目而不水平对齐项目？

Answer 1

Svg和img元素具有display: inline-block。内联块具有底部间隙。您只需要将显示更改为阻止即可。

我创建了Sandbox作为示例

Answer 2

[编辑] ：基于基里尔的答案（沙箱表示感谢），这就是我在想的事情：

import React from "react";
import { Grid } from "@material-ui/core";
import { Error } from "@material-ui/icons";

export default function App() {
  return (
    <Grid container spacing="1" alignItems="center">
      <img
        src="https://yt3.ggpht.com/a/AATXAJxK3dHVZIVCtxjYZ7mp77wBbCs9fw4zU46V_Q=s288-c-k-c0xffffffff-no-rj-mo"
        alt="no-src"
        height="20px"
      />
      <span style={{ padding: 5 }}>no title supplied</span>
      <Error />
    </Grid>
  );
}

不能将三个元素放在同一个网格中吗？这样会更容易，并且您的实际代码也可以使用。

如果不是，则网格可能对齐了，但内容不是对齐的，因为它不是flex容器的直接子级。尝试将display: table-cell; verticalAlignment:center添加到网格项（或通过将其包装在宽度和高度为100％的div中来添加其内容）

如何在材料UI网格行中垂直对齐我的项目？

2 个答案: