image and h4 elements are not coming side by side in React Material UI

November 12, 2021

i am uisng material ui in react. Trying to to put image and h4 adjecent. but they aligning vertically. i tried to adjust the width but not working.

import React, { Component } from "react";
import robo from "./robo.png";
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles({
  logo: {
    width: 100,
  },
  name: {
    width: 100,
  },
});
const Home = () => {
  const classes = useStyles();

  return (
    <div>
      <img alt="Gyrodata" src={robo} className={classes.logo} />
      <h4 className={classes.name}>Maersk Invincible</h4>
    </div>
  );
};

export default Home;

>Solution :

H4 is a block level element, that’s why it moved to the next line. You can use flex to make them inline or make h4 an inline element using display property.

In below code, I’ve used flex to make the children appear in the same row. You can find more information on flex here and its supported by all major browsers now.

Your updated code.

import React, { Component } from "react";
import robo from "./robo.png";
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles({
  container: {
    display: 'flex',
  },
  logo: {
    width: 100,
  },
  name: {
    width: 100,
  },
});
const Home = () => {
  const classes = useStyles();

  return (
    <div className={classes.container}>
      <img alt="Gyrodata" src={robo} className={classes.logo} />
      <h4 className={classes.name}>Maersk Invincible</h4>
    </div>
  );
};

export default Home;