Center Align logo in MUI AppBar React

Question

I am trying to center align logo in AppBar. Really got stuck to achieve the logo alone at the center. Both vertical and horizontal.

Here is my AppBar.tsx

import * as React from 'react';
import { styled, useTheme } from '@mui/material/styles';

import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

import logo from './../assets/images/logo_white.svg'
import Box from '@mui/material/Box';
import MoreIcon from '@mui/icons-material/MoreVert';
const drawerWidth = 240;



interface AppBarProps extends MuiAppBarProps {
  open?: boolean;
}

const AppBar = styled(MuiAppBar, {
    shouldForwardProp: (prop) => prop !== "open"
  })<AppBarProps>(({ theme, open }) => ({
    transition: theme.transitions.create(["margin", "width"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    ...(open && {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: `${drawerWidth}px`,
      transition: theme.transitions.create(["margin", "width"], {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen
      })
    })
  }));



  export default function AppBar({ open, onDrawerOpen }:any) {
    const theme = useTheme();
  
    return (
      <AppBar position="fixed" style={{ background: "#002a5e" }} open={open}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={onDrawerOpen}
            edge="start"
            sx={{ mr: 2, ...(open && { display: "none" }) }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            TITLE
          </Typography>

          <Box
            component="img"
            sx={{
            height: 32, 
            }}
            alt="MyLogo"
            src={logo}
        />

        </Toolbar>
      </AppBar>
    );
  }

Now it just shows along with the title text. Please help

You need to add that line in your code `````` – DSDmark Dec 13 '22 at 17:10 — DSDmark, Dec 13 '22 at 17:10

score 1 · Answer 1 · answered Dec 13 '22 at 17:22

You need to pack IconButton and Typography in to a Box and set it's display to absolute. Then you can manage the logo with flex attributes.

export default function AppBarr({ open, onDrawerOpen }: any) {
  const theme = useTheme();

  return (
    <AppBar position="fixed" style={{ background: "#002a5e" }} open={open}>
      <Toolbar sx={{ justifyContent: "center" }}>
        <Box
          sx={{
            position: "absolute",
            display: "flex",
            alignItems: "center",
            right: "20px",
          }}
        >
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={onDrawerOpen}
            edge="start"
            sx={{ mr: 2, ...(open && { display: "none" }) }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            TITLE
          </Typography>
        </Box>

        <Box
          component="img"
          sx={{
            height: 32,
          }}
          alt="MyLogo"
          src={logo}
        />
      </Toolbar>
    </AppBar>
  );
}

This is a good source to learn all the approaches you can take.

I tried and it pushed the logo to center but the title and icon pushed to the extreme right — Sandeep Thomas, Dec 14 '22 at 07:48
@SandeepThomas You can change `right: "20px"` to place it where you want exactly. — Hamed Siaban, Dec 14 '22 at 08:09

John Li · Accepted Answer · 2022-12-13T17:17:18.803

There are many possible approaches, as a basic example perhaps try add a container with flex: 1 on both side of the logo.

This should always push the logo to the center of Toolbar, but still keep the button and title at the start of it, as it seemed to be the desired result.

Example:

import * as React from "react";
import { styled, useTheme } from "@mui/material/styles";

import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";

import logo from "./../assets/images/logo_white.svg";
import Box from "@mui/material/Box";
import MoreIcon from "@mui/icons-material/MoreVert";
const drawerWidth = 240;

interface AppBarProps extends MuiAppBarProps {
  open?: boolean;
}

const AppBar =
  styled(MuiAppBar, {
    shouldForwardProp: (prop) => prop !== "open",
  }) <
  AppBarProps >
  (({ theme, open }) => ({
    transition: theme.transitions.create(["margin", "width"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    ...(open && {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: `${drawerWidth}px`,
      transition: theme.transitions.create(["margin", "width"], {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen,
      }),
    }),
  }));

export default function AppBar({ open, onDrawerOpen }: any) {
  const theme = useTheme();

  return (
    <AppBar position="fixed" style={{ background: "#002a5e" }} open={open}>
      <Toolbar>
        <Box sx={{ display: "flex", alignItems: "center", flex: "1" }}>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={onDrawerOpen}
            edge="start"
            sx={{ mr: 2, ...(open && { display: "none" }) }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            TITLE
          </Typography>
        </Box>
        <Box
          component="img"
          sx={{
            height: 32,
          }}
          alt="MyLogo"
          src={logo}
        />
        <Box sx={{ flex: "1" }}></Box>
      </Toolbar>
    </AppBar>
  );
}

Thanks a lot for that and it worked great. But a stupid question if you dont mind.. Here for the box containing the title, you have specified alignItems center, even it is on the left and logo on the center where nothing is specified.. How is that? — Sandeep Thomas, Dec 14 '22 at 07:25
@SandeepThomas `alignItems: "center"` here is just for aligning elements inside the `Box` vertically, some more about this property [here](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items). — John Li, Dec 14 '22 at 16:23

Center Align logo in MUI AppBar React

2 Answers2

Linked