Grid Column Not Centering Image

I am having trouble getting the Image inside of a semantic-ui-react Grid Column to be centered. The Message I have below the Image is being centered correctly by using

textAlign='center'

on the Column, but if I try use for example:

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

The Image keeps to the left. I can CSS/Flex to position the Image where I want it in the Column, and it may be the correct way to do it, but Should I not be able to simply position the Image in the center of the Grid Column without CSS?

Solution

Make a div inside <Grid.Column> with class ui segment. Then set class="ui centered medium image" in Image tag. You can avoid another div just set a class ui segment in <Grid.Column>. See more Image property in Sementic-ui.

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