小编que*_*ons的帖子

我的图像溢出了网格的边界。我认为这是因为它的大小达到了精确的大小，但我不确定为什么，因为我指定图像只能包含sm={6}它不包含的内容。代码和图像如下。

class Intro extends React.Component {
render() {
    return (
        <Grid container className="intro">

            <Grid item xs={12} sm={6}>
                <img src={IntroFood} alt="Restaurant Intro Food" className="introImg" />
            </Grid>

            <Grid item container direction="column" xs={12} sm={6} alignContent="center" justify="center">
                <Typography variant="body1">{this.props.desc} </Typography>
                <Button>Go to Menu</Button>
            </Grid>
        </Grid>

    );
}

}

我在 App.JS 中调用此代码，如下所示： PS 这也只是一个片段，但网站上的每个组件本质上都是一个网格项

`

  {/* Header */}
  <Grid item>
    <NavBar restaurantName="test" address="test addrr" phoneNum="test phone" />
  </Grid>

  {/* Intro */}
  <Grid item className="pad">
    <Intro desc="Hi there and welcomhis message will be repeated …

标题说明了一切 - 我的分隔符不在文本中间。我当前的结果如下所示：

但我希望我的分隔线像这样位于中间（参见红线）

奇怪的是，material ui 文档表明这是默认行为，但由于某种原因，对我来说情况并非如此。

我的代码如下：

<Divider textAlign="center" variant="inset"><Typography variant="h3">About</Typography></Divider>