reactjs - 如何将箭头放在红色边框的中心和外部？React-多轮播

Question

我正在使用 react-multi-carousel，我想做的是始终在边界框的中间和外部放置箭头，我该怎么做？css中有什么技巧可以完成这个吗？

我尝试将 react-multiple-carousel__arrow--left 和 react-multiple-carousel__arrow--rightft 与绝对位置放置，但这将始终将箭头放在页面顶部。以下是我到目前为止的代码...

 <CarouselWrapper>
        <Carousel
          customLeftArrow={<CustomLeftArrow />}
          customRightArrow={<CustomRightArrow />}
          renderButtonGroupOutside={true}
          customButtonGroup={<ButtonGroup />}
          responsive={responsive}
          arrows={false}
        >
          <div className="image">1</div>
          <div className="image">2</div>
          <div className="image">3</div>
          <div className="image">4</div>
          <div className="image">5</div>
          <div className="image">6</div>
        </Carousel>
 </CarouselWrapper>

css

.image {
  height: 150px;
  width: 150px;
  font-size: 25px;
  margin: 10px;
  display: inline-block;
  line-height: 100px;
  border: 3px red solid;
}


 function CustomRightArrow({ onClick }) {
    return (
      <button
        onClick={handleClick}
        aria-label="Go to next slide"
        className="react-multiple-carousel__arrow react-multiple-carousel__arrow--right"
      />
    );
  }

  function CustomLeftArrow({ onClick }) {

    return (
      <button
        onClick={handleClick}
        aria-label="Go to previous slide"
        className="react-multiple-carousel__arrow react-multiple-carousel__arrow--left"
      />
    );
  }

  const ButtonGroup = ({ next, previous }) => {
    return (
      <div className="carousel-button-group">
        <CustomLeftArrow
          onClick={() => previous()}
        />
        <CustomRightArrow onClick={() => next()} />
      </div>
    );
  };