对语义UI列内容进行对齐

Question

问题

当页面较小时，配置文件图片将正确地居中。当页面大小满时，它会向左浮动。为什么会这样呢？

const App = () => {
  return (
    <Container>
      <Header />
      <Grid centered>
        <Container>
          <Image src={image} size="small" />
        </Container>
      </Grid>
    </Container>
  );
};

正确居中

​

​

向左漂浮

​

​

沙箱连接

https://codesandbox.io/s/w77kymo1lw

Answer 1

您需要将ui centered image添加到图像组件中。

const App = () => {
  return (
    <Container>
      <Header />
      <Grid centered>
        <Container>
          <Image ui centered image src={image} size="small" />
        </Container>
      </Grid>
    </Container>
  );
};