ReactJS中的问题居中组件

Question

我来自React Native，所以我仍在适应ReactJS。我有两个按钮，一个是常规按钮，另一个是图标按钮。我想将常规按钮居中放置，并在屏幕底部放置图标按钮。我试过使用justifyContents：'center'和类似的设置，如我的代码所示，但它似乎不起作用。我的所有代码都在下面，并带有注释，显示我的按钮代码的位置。感谢您的协助。

import React, {useState} from 'react';
import SettingsIcon from '@material-ui/icons/Settings';
import { Button , TextField, IconButton} from '@material-ui/core';

function App() {

  const [task, setTask] = useState("");
  const [goals, setGoal] = useState(["test"]);

  const addGoal = () => {
    setGoal([...goals, task]);
  };

  const listItems = goals.map((number) =>
    <li>{goals}</li>
  );

  return (
    <div style={{padding: 50, flexDirection: 'column'}}>

      <div style = {{display: 'flex', fontFamily: 'Roboto', fontSize: 55}}>
        <text>Tuesday</text>
      </div>

      <text style = {{display: 'flex', fontFamily: 'Roboto', fontSize: 45, marginBottom: 50}}>11:45</text>

      <div style = {{marginBottom: 20}}>
        <TextField inputProps={{style: {fontFamily: 'Roboto'}}} InputLabelProps = {{style: {fontFamily: 'Roboto'}}} id="standard-basic" autoComplete='off' label="New Goal"  fullWidth value = {task} onChange = {e => setTask(e.target.task)}/>
      </div>

      //TRYING TO CENTER THIS BUTTON
      <div style = {{display: 'flex', alignSelf: 'center', justifContent: 'center'}}>
        <Button variant="outlined" disableElevation size = "medium">
          Add Goal
        </Button>
      </div>

      <div style = {{flexDirection: 'column', paddingTop: 40}}>
        <ui>listItems</ui>
      </div>

      //TRYING TO HAVE THIS AT THE BOTTOM OF THE PAGE
      <div style = {{display: 'flex', justifContent: 'flex-end'}}>
        <IconButton>
          <SettingsIcon/>
        </IconButton>
      </div>

    </div>
  );
};

export default App;

Answer 1

要回答您的问题，我想您想念了，但是应该是justifyContent，而不是justifContent。

  <div style = {{display: 'flex', alignSelf: 'center', justifyContent: 'center'}}>

  <div style = {{display: 'flex', justifyContent: 'flex-end'}}>