Comment centrer une div dans React.js

par

Centrer un div dans React.js #

Pour centrer un div dans React.js, il suffit de régler son display à flex et son
alignItems et justifyContent propriétés à center. Le contenu de la div sera
sera centré horizontalement et verticalement.

const App = () => {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
      }}
    >
      <h2>hello world</h2>
    </div>
  );
};

export default App;

Si vous ne souhaitez pas que la division soit de pleine hauteur, supprimez l’élément height propriété
de la style objet.

Nous avons utilisé les styles en ligne pour centrer un div dans React.

Remarquez que nous avons utilisé deux jeux d’accolades lors du passage de la balise style à l’élément
à l’adresse div élément.

L’ensemble extérieur d’accolades marque une expression qui doit être évaluée, et
l’ensemble intérieur est l’objet des styles et des valeurs.

Notez que les propriétés de plusieurs mots sont mises en majuscule lorsqu’elles sont spécifiées comme des styles en ligne.

Vous pouvez également extraire le style dans une variable.

const App = () => {
  const styles = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100vh',
  };

  return (
    <div style={styles}>
      <h2>hello world</h2>
    </div>
  );
};

export default App;

Alternativement, vous pouvez centrer un div en écrivant votre css dans un fichier avec une balise .css
et en l’important.

.centered-div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Et voici comment nous allons importer et utiliser l’extension centered-div classe.

import './App.css';

const App = () => {
  return (
    <div className="centered-div">
      <h2>hello world</h2>
    </div>
  );
};

export default App;

Lorsque vous importez des fichiers CSS globaux dans React, il est préférable d’importer le fichier CSS dans votre classe index.js fichier.

Le site index.js est le point d’entrée de votre application React, donc il sera toujours exécuté.
être exécuté.

D’un autre côté, si vous importez un fichier CSS dans un composant, les styles CSS
peuvent être supprimés une fois le composant démonté.

Un modèle très commun dans React est d’extraire les styles couramment utilisés dans un
composant qui rend ses enfants.

function Center({children}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
      }}
    >
      {children}
    </div>
  );
}

const App = () => {
  return (
    <Center>
      <h2>hello world</h2>
    </Center>
  );
};

export default App;

Cet exemple permet d’obtenir le même résultat.

Tout ce que nous passons entre les balises d’ouverture et de fermeture de la balise Center composant
sera centré sur la page.

Laisser un commentaire