Как центрировать изображение в JSX с помощью CSS-Примеры кода

/*
 * Центрирование изображения внутри контейнера с помощью React и встроенного CSS
 * 
 * 1. Добавить оберточный div вокруг изображения
 * 2. Установить оберточный div в качестве display: flex
 * 3. Установить изображение в качестве отступа: авто
*/

import React from 'react';

const Image = ({ src }) => (
  <div style={{ display: 'flex' }}>
    <img
      src={src}
      style={{ margin: 'auto' }}
    />
  </div>
);

import React, { Component } from 'react';

class CenterImage extends Component {
  render() {
    // Определите встроенный CSS
    const style = {
      display: 'flex', // Используйте панель Flexbox
      justifyContent: 'center' // Центрируйте горизонтально
    };

    // Верните центрированное изображение
    return (
      <div style={style}>
        <img src={this.props.src} alt={this.props.alt} />
      </div>
    );
  }
}