web-dev-qa-db-fra.com

ReactJS + React Router: Comment centrer div?

J'ai actuellement un ReactJS + React Router project set up and in Chrome dev tool under elements shows:

<body>
  <div class="wrapper">
    <div data-reactroot>
      <div>
        <div class="container">Center Me</div>
      </div>
    </div>
  </div>
</body>

avec style et aucun pour class="wrapper":

.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

Pourtant le <div class="container">Center Me</div> reste en haut et centré horizontalement mais pas verticalement.

J'ai vérifié la taille de cette div et elle est extrêmement courte mais occupe toute la largeur de la page du navigateur.

Que pourrais-je faire de mal? Comment centrer <div class="container">Center Me</div>? J'ai même essayé de définir 100% for width and height à un niveau supérieur, mais ne fonctionne toujours pas.

javascripthtmlcssreactjsreact-router
7
Jo Ko

Juste:

<div style={{display: 'flex',  justifyContent:'center', alignItems:'center', height: '100vh'}}>
    <h1> I am centered </h1>
</div>

ou css:

.centered {
  height: 100vh; /* Magic here */
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="centered">
  <h1> I am centered </h1>
</div>
18
Trọng Nguyễn Công

Oui, pour réagir,

for devient htmlFor, et class devient className etc.

voir la liste complète de la façon dont les attributs HTML sont modifiés ici:

https://facebook.github.io/react/docs/dom-elements.html

2
Derrick

Voici un exemple de code qui recrée essentiellement votre page mais sans réagir. J'espère que cela vous aidera et tirez si vous avez des questions.

html, body{
  width: 100%;
  height: 100%;
}

.wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  height: 300px;
  width: 300px;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
<html>
<body>
  <div class="wrapper">
    <div data-reactroot>
      <div class="container">
        <div>
          <!-- Anything below this line will be centered -->
          <div>Hello World!</div>
          <div>Center Me</div>
          <!-- Anything above this line will be centered -->
        </div>
      </div>
    </div>
  </div>
</body>
<html>
1
Win

In React Vous devez utiliser className et non class. className="wrapper

0
matthew