Search code examples
cssreactjsmaterial-uiflexboxjss

Align Image and Text in Horizontal Direction in React

I'm trying to achieve like this in the picture below. Right now, my image is on the top while the text is below. I wanted to achieve like the text is just on the right side of the image.

Pls check this codesandbox link CLICK HERE

enter image description here

CODE

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>
  );
Solution

  • Adding display: "flex" to children doesn't really do much. What I did was I added a wrapper class around you icon, name and role, with the display: "flex", flexDirection:"row" justifyContent: "center" and alignItems:"center" properties. What the wrapper then does is that it puts all the divs "under" it in a row, like:

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

    However, if I for example put another 2 divs under the one to the right, they will stack on top of each other, because the flexDirection property is set to row for all children under the wrapper, but not for their children.

    <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>

    I also removed some other stuff, but here's the code:

    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>
  );
}

    For more information on how to use flexbox in CSS, check out this guide.