网格列未居中图像

Question

我无法让语义-ui-react 网格列中的图像居中。使用

，我在图像下方的消息已正确居中

textAlign='center'

在专栏上，但如果我尝试使用例如：

<Grid>
    <Grid.Row>
        <Grid.Column centered textAlign='center'>
            <Image src={imgsrc} />
            <Message size='small'>Image Title</Message>
        </Grid.Column>
    </Grid.Row>
</Grid>

图像保持在左侧。我可以 CSS/Flex 将图像放置在列中我想要的位置，这可能是正确的方法，但是我是否不能简单地将图像放置在网格列的中心而不使用 CSS?

Answer 1

用classui segment在<Grid.Column>里面做一个div。然后在Image标签中设置class="ui centered medium image"。您可以避免另一个 div，只需在 <Grid.Column> 中设置一个 class ui segment。在 Sementic-ui.

中查看更多 Image 属性

<Grid>
    <Grid.Row>
        <Grid.Column>
            <div class="ui segment">
              <img class="ui centered medium image" src={imgsrc}>
            </div>
        </Grid.Column>
    </Grid.Row>
</Grid>

网格列未居中图像

Grid Column Not Centering Image

css

semantic-ui-react