How to align center mui avatar in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To align center mui avatar in React js, You have to use display flex with justify-content center. It will align mui avatar in the center.

Today, I am going to show you, how to change the postion of mui avatar in react js.

Installation

Install the following packages to change postion of mui avatar in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

MUI material align center mui avatar example.

The below code is an example of changing postion of mui avatar using this code justify-content.

App.js

import * as React from "react";
import Avatar from "@mui/material/Avatar";
import "./styles.css";

function stringAvatar(name, color) {
  return {
    sx: {
      bgcolor: color
    },
    children: `${name[0]}`
  };
}

export default function BackgroundLetterAvatars() {
  return (
    <div className="avatar-container">
      <Avatar {...stringAvatar("Guide Hub", "#673ABE")} />
    </div>
  );
}

styles.css

.avatar-container {
  display: flex;
  width: 200px;
  border: 2px solid;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
}

In the above code example, I have used the @mui/material component and align center of mui avatar.

Here, we are provided code sandbox links for the above program align center mui avatar. Then you can use whenever you want and do the changes as per your requirements.

Let’s check the output.

Try it Yourself

All the best 👍