时间戳

首页 > 解决方案 > ReactJS 中的问题居中组件

css - ReactJS 中的问题居中组件

问题描述

我来自 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;

标签： cssreactjs

解决方案

要回答你的问题，我想你错过了，但它应该是 justifyContent，而不是 justifContent。

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

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

推荐阅读