為什么我的 create-react-app 內容中心不可用？

Question

我使用了 create-react-app 並且一直在使用它。 我了解“應用程序” class 應該使內容居中，而當我幾乎什么都沒有的時候它就做到了。 但現在它沒有這樣做。 有人可以告訴我哪里出錯了嗎？

應用程序.js

import React from "react";
import './App.css';
import { Route, BrowserRouter as Router } from "react-router-dom";
import Home from "./pages/home";
import About from "./pages/about";
function App() {
  return (
    <div className="app">
    <Router>
        <Route path="/" exact component={Home} />
        <Route path="/about" exact component={About} />
    </Router> 
    </div>
  );
}

export default App;

about.js

import React from "react";
import { Button, Breadcrumb, Card } from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.min.css'

function About() {
    return (

        <div className="app">
            <h1>ABOUT PAGE</h1> 
            <a href="/">
            <img src="https://www.searchpng.com/wp-content/uploads/2019/02/Back-Arrow-Icon-PNG-715x715.png" height="50px" />
          </a> 
          <Card className="mb-3" style={{ color: "#000"}}>
              <Card.Img/>
              <Card.Body>
              <Card.Title>
                  Card Example
              </Card.Title>  
              <Card.Text>
                  This is an example of react bootstrap cards
              </Card.Text>
              </Card.Body>
          </Card>
          <Breadcrumb>
          <Breadcrumb.Item>Test</Breadcrumb.Item>
          <Breadcrumb.Item>Test 2</Breadcrumb.Item>
          <Breadcrumb.Item>Test 3</Breadcrumb.Item>
          </Breadcrumb>
          <Button variant="success">Test Button</Button>
        </div>

    )
}

export default About;

Answer 1

在 create-react-app 中，有一個文件 App.css 和 class .App ：

.App {
  text-align: center;
}

如果您想使用它，則必須使用 class 的大寫名稱，因為它是在 css 文件中定義的。