如何將卡在 flex 中也對齊在中心？

Question

我使用了 bootstrap 中的卡片，因為我希望兩張卡片都在同一行中，所以我使用了 flex，但現在兩張卡片都在同一行中，但與左上角對齊。 我要在中心？

如果可能的話，有人可以告訴如何在不使用 css 的情況下將 flex 保持在中心嗎？ 並且在卡片之間提供一些空間也可以嗎？

   import React from 'react';
    
    import { Link } from "react-router-dom";
    import Button from '@material-ui/core/Button';
    
    import ButtonGroup from '@material-ui/core/ButtonGroup';
    import { makeStyles } from '@material-ui/core/styles';
    import { Navbar } from 'react-bootstrap';
    import { Nav, NavDropdown, NavItem } from "react-bootstrap";
    
    const useStyles = makeStyles((theme) => ({
      root: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        '& > *': {
          margin: theme.spacing(1),
        },
      },
    }));
    
    function SignUp() {
      
      return (
        <div>
          <br/>
          <br/>
        <div style={{display : 'flex'}} >
          <br/>
          <br/>
          <div class="card"  style={{width: '18rem'}}>
      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" role="img"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
    
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
        <Button>
                <Link class="nav-link" to="/manageexam/:id">
                  Manage Exam
                </Link>
                </Button>
      </div>
      <br/>
      <br/>
      
    </div>
    <div class="card" style={{width: '18rem'}}>
      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" role="img"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
    
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
        <Button>
                <Link class="nav-link" to="/manageuser/:id">
                  Manage User
                </Link>
                </Button>
      </div>
      
    </div>
      
        
          
                {/*<Button><a href="http://localhost:3000/">LOGOUT</a></Button>*/}
                
        </div>
        </div>
      );
    }
    
    export default SignUp;

Answer 1

您可以使用 justify-content: "center"（在代碼justifyContent: "center" 中）而不是 alignItems: "center"。 並在您編寫 {display: flex} 的 div 中使用該類

您需要糾正的幾點：

1. 您已經編寫了 useStyles 但從未使用過它。
2. 此外，在 React 中你必須使用 className 而不是 class。

請檢查演示代碼

Answer 2

您可以在 css 中添加justifyContent:center或justifyContent:space-around