排版中心

Question

我试图使用textAlign和align两种方法将排版放在中心，但这不起作用。有人能帮我吗？生成的页面位于代码下面。

​

    import React, {useState} from 'react'
    import logo from '../../images/logo.svg'
    import { Typography } from '@mui/material'
    import AccountCircleIcon from "@mui/icons-material/AccountCircle"

    const NavBar = () => {
      const StyledToolbar = styled(Toolbar)({
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between"
      });

      const Logo = styled("img")({
         width: "12rem",
         height: "auto",
      });

      const StyledAppBar = styled(AppBar)({
         position: "sticky",
         backgroundColor: "#EDEDED",
      });

      return (
        <StyledAppBar>
          <StyledToolbar>
            <Logo src={logo} alt="quizy" />
            <Typography variant="h5" color="black" align='center'>
              Question
            </Typography>
            <AccountCircleIcon
              style={{ color: "black" }}
             
            />
          </StyledToolbar>
        </StyledAppBar>
      );
    }

​

页面结果

​

Answer 1

它实际上是按照它的宽度居中。要以3个子元素为中心，可以按照CSS属性分配Logo、Typography和Icon：

挠曲-生长:1挠度-基础:0

这可能会将AccountCircleIcon向左移动一点，但您可以为它分配margin-left: auto。您还必须移除指定的Logo宽度。例如：

import React, {useState} from 'react'
import logo from '../../images/logo.svg'
import { Typography } from '@mui/material'
import AccountCircleIcon from "@mui/icons-material/AccountCircle"

const NavBar = () => {
  const StyledToolbar = styled(Toolbar)({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between"
  });

  const Logo = styled("img")({
     width: "12rem",
     height: "auto"
  });

  const StyledAppBar = styled(AppBar)({
     position: "sticky",
     backgroundColor: "#EDEDED",
  });

  return (
    <StyledAppBar>
      <StyledToolbar>
        <div style={{ flexGrow: 1, flexBasis: 0 }}>
          <Logo src={logo} alt="quizy" />
        </div>
        <Typography style={{ flexGrow: 1, flexBasis: 0 }} variant="h5" color="black" align='center'>
          Question
        </Typography>
        <div style={{ flexGrow: 1, flexBasis: 0, textAlign: "right" }}>
          <AccountCircleIcon
            style={{ marginLeft: 'auto', color: "black" }}
          />
        </div>
      </StyledToolbar>
    </StyledAppBar>
  );
}