尝试让两个按钮垂直高度相同且都靠近中心

Question

我尝试创建两个按钮，它们在垂直方向上具有相同的高度，但几乎都居中，之间有一个小间隙。但我不希望按钮在放大或缩小窗口时四处移动（我认为位置需要固定）。我也希望它看起来与我下面所示的类似。

                                           [<] [>]

我的代码：

HTML:

<button id="leftArrow">&lt;</button>
<button id="rightArrow">&gt;</button>

CSS:

#leftArrow {
    border: 0;
    background-color: gray;
    color: white;
}

#rightArrow {
    border: 0;
    background-color: gray;
    color: white;
  }

i have tried looking at border, margin and positioning.

Answer 1

最简单的方法是将它们放在一个以内容为中心的弹性容器中

.page-buttons {
  display: flex;
  justify-content: center;
  gap: 4px;
}

<div class="page-buttons">
  <button class="page-btn">&lt;</button>
  <button class="page-btn">&gt;</button>
</div>