Html 如何将多个按钮居中放置在其他按钮旁边的右上角

我是编程新手。我尝试将顶部的多个按钮与页面中心对齐，我尝试了文本对齐和边距：0；这些都不起作用。现在，我已经将按钮居中，但按钮彼此下方。这有什么办法吗？我该如何准确地将其居中？我用的是烧瓶

CSS:

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

---

您的CSS代码中存在一些问题，这些问题阻碍您实现目标：

• 每个按钮在左右两侧都有一个大的边距，这样就没有足够的项目可以放在一行中
• 将每个按钮大小设置为百分比时，它将引用父元素。如果您有两个以上宽度为40%的按钮，则它们将溢出到下一行
• 关于如何同时设置多个元素的样式：现在，您可以根据每个按钮的唯一id设置其样式。但是类可以同时应用于多个元素，使它们具有相同的样式。因此，我不是通过ID（使用#）进行样式设置，而是基于

  .btn

  进行样式设置，它告诉CSS使用名为

  btn

  的类（用点表示）对所有内容进行样式设置

我还在父元素上设置了

display:flex

、

align items:center

、和

justify content:center

，告诉它将所有项目水平和垂直对齐到中心

下面是一个演示：

#导航栏{
边框：2件纯黑；
保证金：自动；
高度：30px；
最小宽度：43%；
填充物：5px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#搜索输入{
位置：绝对位置；
顶部：20px；
右：0；
高度：35px；
宽度：185px；
边界半径：10px；
字体系列：“Roboto”，无衬线；
字体大小：20px；
大纲：无；
}
/*我想要居中的按钮*/
.btn{
边界：无；
大纲：无；
背景色：透明；
颜色：#606060；
字体大小：27px；
字体系列：“Roboto”，无衬线；
/*用于显示行分隔符*/
填充：0.5em；
右边框：2倍纯黑；
}
/*删除最后一项的边框*/
.btn:类型的最后一个{
边界权：无；
}

交易
汉堡
饮料
塞兹
甜点

非常感谢，它成功了：D还有一件事，我想在每个按钮之间画一条线。所以就像它是一个廉价的|汉堡|饮料。。。。当然有实际的边界。如果我想这样做，我需要为每一个单独的边界吗？嘿，@FatTrat很乐意帮忙！我更改了答案，在每个按钮之间添加了一个边框。请注意，我将按钮从使用边距改为填充，以便边框与按钮文本有一定的分隔，并根据您的要求添加了右边框。我还添加了一条特定规则，即如果一个

.btn

出现在其父元素的末尾，它将不包括右边框。如果你需要更多的解释为什么事情会这样做，不要犹豫，问吧！：-）

#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%;
}