遇到一个排版文本居中对齐的问题,怎么处理?

新手上路,请多包涵

我试着通过<Typography align="center">页脚来对齐中心的文本,但它不起作用。怎么将文本对齐到中间?

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  appBar: {
    top: "auto",
    bottom: 0
  }
}));

export default function Footer() {
  const classes = useStyles();

  return (
    <React.Fragment><CssBaseline /><AppBar color="primary" className={classes.appBar}><Toolbar><Typography align="center">Visit again</Typography></Toolbar></AppBar></React.Fragment>
  );
}

image.png

阅读 1.9k
1 个回答

在<Toolbar></Toolbar>标签上用flex 布局;

<Toolbar style="display: flex;justify-content: center;align-items: center;"></Toolbar>    

或者给你的 <Typography> 设置为块级盒子 display: inline-block;再设置温度。 然后再居中align="center";

希望能解决你的问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题