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

Posted 2023-02-22

【中文标题】在 React 中水平方向对齐图像和文本

【英文标题】：Align Image and Text in Horizontal Direction in React

【发布时间】：2020-11-05 16:59:41

【问题描述】：

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

请检查此代码框链接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>
  );

【问题讨论】：

将你的 headerIcon 和 userName 和角色放在一个 div 中，然后你可以使用 float 或更多的 flex 来调整项目

【参考方案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 指南。

【讨论】：

太棒了！我已将我的代码框更改为此。请检查。一些错误，我也需要对齐名称和角色，就像上图一样，左边有一些间距。请检查。谢谢

同理。在角色和名称周围添加一个内部包装，将 alignItems 向左对齐，并在包装​​周围添加一些边距。为它更新上面的代码。

【参考方案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>
  );

【讨论】：

我认为还有比这更好的方法

我确定有。这只是一种选择。如果您认为这样更好，您可以给出自己的答案。我认为使用 flex 是这里最简单的选择。它使定位对象和在行或列位置移动它们更容易。