如何在溢出的div的左右兩側放置一個元素

Question

我將使箭頭可單擊以在 div 中向左/向右滾動

我有一個 div，其中包含一堆元素（箭頭不包含在我的方法的 div 中） ，如此處所示

我想對齊圖像中的箭頭，但是由於我寫的糟糕的方法，當頁面大小不同時，這些箭頭沒有按預期響應.. 執行上述操作的最佳方法是什么？

目前我的代碼如下所示：

<img src={arrowLeft} alt="Left Arrow" className="arrow"></img>
      <div className="gridRow">
         ......content for elements here.......
      </div>
<img src={arrowRight} alt="Right Arrow" className="arrow right"></img>

CSS：

/*Arrow images*/
.arrow {
  border: 1px solid red;
  position: absolute;
  top: 121%;
}

.arrow.right {
  left: 91.7%;
}

.arrow:hover {
  cursor: pointer;
}

謝謝

Answer 1

與其給position: absolute兩個箭頭（這將使它們對屏幕變化無響應），不如將所有內容包裝在div中並為div提供以下 CSS 屬性：

display: flex;
align-items: center.

這樣，所有元素將排成一行並垂直居中。