如何将多个按钮居中在其他按钮的右上角

Question

我是编程新手。我正在尝试将顶部的多个按钮对齐到页面的中心，我尝试过 text-align 和 margin: 0;这些都没有奏效。现在，我已将按钮居中，但按钮位于彼此下方。有什么解决办法吗？我究竟如何居中？我正在使用烧瓶。

CSS：

#navBar {
    border: 2px solid black;
    margin: auto;
    height: 30px;
    width: 43%;
    padding: 5px;
}

#searchInput {
    position: absolute;
    top: 20px;
    right: 0;
    height: 35px;
    width: 185px;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    outline: none;
}

/*The buttons that I want centered*/
#dealsButton, #burgersButton, #drinksButton, #sidesButton, #dessertsButton{
    border: none;
    outline: none;
    background-color: transparent;
    color: #606060;
    top: 30px;
    font-size: 27px;
    font-family: 'Roboto', sans-serif;
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
}

这是图片。边框与中心对齐，并且应该包含彼此相邻的按钮作为导航栏。我也希望每个按钮都居中。我希望所有按钮都集中在同一个位置，然后我将每个按钮分别向左和向右移动。但是，如果您知道一种将所有这些并排居中的方法，请告诉我。

Answer 1

您的 CSS 代码中有一些问题阻碍了您实现目标：

• 每个按钮的左右边距都很大，这使得没有足够的项目可以放在一行中
• 当您将每个按钮的大小设置为百分比时，它指的是父元素。如果您有超过 2 个宽度为 40% 的按钮，它们会将行溢出到下一个。
• 关于如何同时为多个元素设置样式：现在，您可以根据唯一的 id 来设置每个按钮的样式。但是类可以同时应用于多个元素，为它们提供相同的样式。因此，我不是通过 ids（带 #）进行样式设置，而是基于 .btn 进行样式设置，它告诉 CSS 使用称为 btn 的类（由点表示）来设置所有内容的样式

我还在父元素上设置了display: flex、align-items: center 和justify-content: center，告诉它使所有项目水平和垂直居中对齐。

所以，这里有一个演示：

#navBar {
  border: 2px solid black;
  margin: auto;
  height: 30px;
  min-width: 43%;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#searchInput {
  position: absolute;
  top: 20px;
  right: 0;
  height: 35px;
  width: 185px;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  outline: none;
}


/* The buttons that I want to be centered */

.btn {
  border: none;
  outline: none;
  background-color: transparent;
  color: #606060;
  font-size: 27px;
  font-family: 'Roboto', sans-serif;
  /* used to show a line seperator */
  padding: 0 0.5em;
  border-right: 2px solid black;
}


/* Remove border for last item */

.btn:last-of-type {
  border-right: none;
}

<nav id="navBar">
  <a class="btn">Deals</a>
  <a class="btn">Burgers</a>
  <a class="btn">Drinks</a>
  <a class="btn">Sides</a>
  <a class="btn">Desserts</a>
</nav>