web-dev-qa-db-ja.com

ReactJS + Reactルーター：divを中央に配置するには？

現在、ReactJS + React Routerプロジェクトがセットアップされており、Chrome devツールの要素ショーに以下が表示されています。

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

スタイリングあり、class="wrapper"にはなし：

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

しかし、<div class="container">Center Me</div>は最上部にとどまり、水平ではなく垂直に中央に配置されます。

そのdivのサイズを確認しましたが、非常に短いですが、ブラウザーページの幅全体を占めています。

何が間違っているのでしょうか？ <div class="container">Center Me</div>を中央に配置するにはどうすればよいですか？ 100% for width and heightをより高いレベルに設定しようとしましたが、それでも動作しません。

javascripthtmlcssreactjsreact-router
7
Jo Ko

ただ：

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

または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

はい、反応します

forはhtmlForになり、クラスはclassNameなどになります。

hTML属性がどのように変更されるかの完全なリストをここで参照してください。

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

2
Derrick

基本的には反応せずにページを再作成するコード例を次に示します。ご質問がありましたら、これがお役に立てば幸いです。

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 classではなくclassNameを使用する必要があります。className="wrapper

0
matthew