Блог

Главная - Вопросы по программированию - Столбец сетки, не центрирующий изображение

Столбец сетки, не центрирующий изображение

#css #semantic-ui-react

#css #семантический-пользовательский интерфейс-реагировать

Вопрос:

У меня возникли проблемы с центрированием изображения внутри столбца сетки semantic-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?

Комментарии:

1. Будете ли вы рассматривать центральное изображение в изображении пользовательского интерфейса вместо представления сетки? или обязательно нужен вид сетки?

Ответ №1:

Сделайте div инсайд <Grid.Column> с классом ui segment . Затем установите class="ui centered medium image" в теге Image. Вы можете избежать другого div, просто установив класс ui segment <Grid.Column> . Смотрите дополнительные свойства изображения в 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>
Метки: ,