在 React 中水平方向对齐图像和文本

Question

我正在尝试在下图中实现这样的效果。现在，我的图片在顶部，而文字在下方。我想实现文本就在图像的右侧。

请检查此代码框链接CLICK HERE

代码

const drawer = (
    <div>
      <h2 className={classes.headerTitle}>Login</h2>
      <Divider />
      <div className={classes.headerIcon}>
        <AccountCircleIcon fontSize="large" />
      </div>
      <h5 className={classes.headerName}>Bake</h5>
      <p className={classes.headerRole}>User</p>
      <Divider />
    </div>
  );

Answer 1

为孩子添加display: "flex" 并没有多大作用。我所做的是在你的图标、名称和角色周围添加了一个包装类，具有display: "flex"、flexDirection:"row"、justifyContent: "center" 和alignItems:"center" 属性。然后包装器所做的就是将所有 div 连续“放在”它的“下方”，例如：

<div className="classes.wrapper">
  <div>This one is to the left</div>
  <div>This one is to the right</div>
</div>

但是，例如，如果我将另外 2 个 div 放在右侧的 div 下，它们将堆叠在一起，因为 flexDirection 属性设置为 row 用于包装器下的所有子级，但不适用于他们的孩子。

<div className="classes.wrapper">
  <div>This one is to the left</div>
  <div>
       <div>This one will be to the right on top</div>
       <div>This one will be to the right under</div>
  </div>
</div>

我还删除了一些其他的东西，但这里是代码：

import React from "react";
import { makeStyles } from "@material-ui/styles";
import Divider from "@material-ui/core/Divider";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import "./styles.css";

const useStyles = makeStyles(theme => ({
  wrapper: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    margin: "0.5rem"
  },
  innerWrapper: {
    display: "flex",
    flexDirection: "column",
    alignItems: "baseline",
    marginLeft: "0.5rem"
  },
  headerTitle: {
    fontSize: "1.3rem",
    cursor: "pointer"
  },
  headerName: {
    margin: "0",
    fontStyle: "bold",
    fontSize: "1rem"
  },
  headerRole: {
    margin: "0",
    fontSize: "0.7rem"
  },
  iconButtons: {
    marginLeft: "auto"
  }
}));

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

  const drawer = (
    <>
      <h2 className={classes.headerTitle}>Login</h2>
      <Divider />
      <div className={classes.wrapper}>
        {" "}
        <div className={classes.headerIcon}>
          {" "}
          <AccountCircleIcon fontSize="large" />
        </div>
        <div className={classes.innerWrapper}>
          <h5 className={classes.headerName}>Bake</h5>
          <p className={classes.headerRole}>User</p>
        </div>
        <Divider />
      </div>
    </>
  );

  return (
    <nav className={classes.drawer}>
      <Hidden lgUp implementation="css">
        <Drawer
          variant="temporary"
          anchor={"left"}
          classes={{
            paper: classes.drawerPaper
          }}
          ModalProps={{
            keepMounted: true
          }}
        >
          {drawer}
        </Drawer>
      </Hidden>
      <Hidden implementation="css">
        <Drawer
          classes={{
            paper: classes.drawerPaper
          }}
          variant="permanent"
          open
        >
          {drawer}
        </Drawer>
      </Hidden>
    </nav>
  );
}

有关如何在 CSS 中使用 flexbox 的更多信息，请查看 this 指南。

Answer 2

这是我的做法。我已经调整了图标右侧的文字。 你可以做进一步的造型：

import React from "react";
import { makeStyles } from "@material-ui/styles";
import Divider from "@material-ui/core/Divider";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import "./styles.css";

const headerStyles = {
  display: "flex",
  justifyContent: "center"
};

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex"
  },
  headerTitle: {
    ...headerStyles,
    fontSize: "1.3rem",
    cursor: "pointer"
  },
  headerIcon: {
    ...headerStyles,
    marginTop: "1rem"
  },
  headerName: {
    ...headerStyles,
    marginTop: "0.2rem"
  },
  headerRole: {
    ...headerStyles,
    marginTop: "-0.8rem",
    marginBottom: "1rem"
  },
  iconButtons: {
    marginLeft: "auto"
  },
  userName: {
    display: "flex",
    flexDirection: "row"
  }
}));

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

  const drawer = (
    <div>
      <h2 className={classes.headerTitle}>Login</h2>
      <Divider />
      <div className={classes.userName}>
        <div className={classes.headerIcon}>
          <AccountCircleIcon fontSize="large" />
        </div>
        <div>
          <h5 className={classes.headerName}>Bake</h5>
          <p className={classes.headerRole}>User</p>
        </div>
      </div>
      <Divider />
    </div>
  );

  return (
    <nav className={classes.drawer}>
      <Hidden lgUp implementation="css">
        <Drawer
          variant="temporary"
          anchor={"left"}
          classes={{
            paper: classes.drawerPaper
          }}
          ModalProps={{
            keepMounted: true
          }}
        >
          {drawer}
        </Drawer>
      </Hidden>
      <Hidden implementation="css">
        <Drawer
          classes={{
            paper: classes.drawerPaper
          }}
          variant="permanent"
          open
        >
          {drawer}
        </Drawer>
      </Hidden>
    </nav>
  );
}