Buttons not centering in box, react Mui

Question

Im working on a image carousel in my react project, I got it all to work but im struggling to get the side buttons to center vertically. I've put the three elements in a flexbox with both alignContent:"center", and justifyContent:"center" but the buttons wont seem to move. The image however centers as normal. Please help! I've included the full code of the component aswell as a screenshot of the slider.

import { Box, IconButton, Button } from "@mui/material";
import React, { useState } from "react";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";

const slides = [
  {
    name: "search",
    img: "https://cdn.pixabay.com/photo/2022/04/24/16/52/animal-7154059_960_720.jpg",
  },
  {
    name: "sales",
    img: "https://cdn.pixabay.com/photo/2022/06/26/12/48/animal-7285343_960_720.jpg",
  },
  {
    name: "about",
    img: "https://cdn.pixabay.com/photo/2022/07/22/19/42/marmot-7338831_960_720.jpg",
  },
];

function Slider() {
  const [currSlide, setCurrSlide] = useState(0);

  function handleSlide(e) {
    if (currSlide === slides.length - 1 && e === "next") {
      setCurrSlide(0);
      console.log(currSlide);
    } else if (currSlide === 0 && e === "previous") {
      setCurrSlide(slides.length - 1);
      console.log(currSlide);
    } else {
      if (e === "next") {
        setCurrSlide(currSlide + 1);
        console.log(currSlide);
      } else {
        setCurrSlide(currSlide - 1);
        console.log(currSlide);
      }
    }
  }

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        alignContent: "center",
        width: "100%",
        height: "auto",
      }}
    >
      <Button
        onClick={() => handleSlide("previous")}
        sx={{
          color: "primary",
          height: 50,
          width: 50,
        }}
      >
        <NavigateBeforeIcon fontSize="large" />
      </Button>

      <Box
        component="img"
        sx={{
          height: "auto",
          width: "80%",
          objectFit: "contain",
        }}
        src={slides[currSlide]["img"]}
      />
      <Button
        onClick={() => handleSlide("next")}
        sx={{
          color: "primary",
          height: 50,
          width: 50,
        }}
      >
        <NavigateNextIcon fontSize="large" />
      </Button>
    </Box>
  );
}

export default Slider;

Slider

score 0 · Answer 1 · answered Jul 31 '22 at 15:11

0

Instead of alignContent: "center" use alignItems: "center". This will align all three elements to the center.

answered Jul 31 '22 at 15:11

Ivan Shumilin

1,743
3
13
18

Thanks! Whats the diffrence between the two? Ive gotten everything to work with alignContent before – Gusse Jul 31 '22 at 15:55
@Gusse read here https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items#:~:text=align%2Dcontent%20manages%20the%20space,one%20line%2C%20they%20behave%20similarly. – Hakob Sargsyan Jul 31 '22 at 16:01
@Gusse I recommend [this guide about flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). This is their most visited page by a wide margin. – Ivan Shumilin Jul 31 '22 at 16:44

Buttons not centering in box, react Mui

1 Answers1