Come centrare un'immagine in JSX con CSS-Esempi di codice

Radu TM

Come centrare un'immagine in JSX con CSS

JavaScript di Radu TM June 14, 2022

/*
 * Centra un'immagine all'interno di un contenitore usando React e CSS inline
 * 
 * 1. Aggiungi un div wrapper intorno all'immagine
 * 2. Imposta il div wrapper per visualizzare: flex
 * 3. Imposta l'immagine per margine: auto
*/

import React from 'react';

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

0

31.449

Come centrare un'immagine in JSX con CSS

JavaScript di Radu TM June 14, 2022

import React, { Component } from 'react';

class CenterImage extends Component {
  render() {
    // Definire CSS inline
    const style = {
      display: 'flex', // Usa flexbox
      justifyContent: 'center' // Centra orizzontalmente
    };

    // Restituisci l'immagine centrata
    return (
      <div style={style}>
        <img src={this.props.src} alt={this.props.alt} />
      </div>
    );
  }
}

0

31.449

Richieste JavaScript simili

Ultime richieste JavaScript

Esplora gli esempi di codice per categorie