Flask开发页面中 试过text-align无效如何实现导航按钮水平并排居中

你现在按钮垂直堆叠根本不是居中逻辑的问题，是给每个按钮写的样式直接导致的：

• 给每个按钮单独设置了width: 40% + margin-left: 30% + margin-right: 30%，加起来的总宽度刚好撑满整个#navBar容器的内部宽度，每个按钮都占满一整行，自然就会从上到下垂直堆，根本不可能并排。
• 之前试text-align、margin:0不生效，是因为没把属性加对位置，效果被按钮上的超宽设置完全盖过了。

两种方法都能实现「按钮并排 + 整体在导航栏内水平居中」，可以选改代码最少的用：

方案1：最少改动的行内块实现（适合不想动原有布局逻辑的情况） #

1. 修改#navBar容器样式，补两个属性：

   #navBar {
       border: 2px solid black;
       margin: auto;
       min-height: 30px; /* 把固定height改成min-height，避免27px的字体溢出边框 */
       width: 43%;
       padding: 5px;
       /* 新增两行 */
       text-align: center;
       font-size: 0; /* 消除按钮并排时的默认空白缝隙 */
   }
   

2. 修改按钮的公共样式，删掉导致堆叠的宽、边距设置：

   #dealsButton, #burgersButton, #drinksButton, #sidesButton, #dessertsButton{
       border: none;
       outline: none;
       background-color: transparent;
       color: #606060;
       /* 删掉原来无效的top:30px（没设position，这个属性根本不生效） */
       font-size: 27px; /* 把被容器消掉的字号补回来 */
       font-family: 'Roboto', sans-serif;
       /* 删掉原来的width:40%、margin-left:30%、margin-right:30% */
       display: inline-block; /* 让按钮支持横向并排 */
       margin: 0 12px; /* 给按钮之间留统一的左右间隙，后续调间距直接改这个值就行 */
   }
   

方案2：更易维护的Flex布局实现（适合后续要单独调整单个按钮位置的场景） #

这个方案完全满足你“先整体水平居中，后续单独调整每个按钮左右位置”的需求，整体居中逻辑由容器控制，单按钮的位置调整不会打乱整体的居中对齐：

1. 只改#navBar的容器样式，三行代码就能搞定并排居中：

   #navBar {
       border: 2px solid black;
       margin: auto;
       min-height: 30px;
       width: 43%;
       padding: 5px;
       /* 新增三行 */
       display: flex;
       justify-content: center; /* 让所有子元素沿水平方向整体居中 */
       align-items: center; /* 让所有子元素在垂直方向居中，不会上下错位 */
       gap: 15px; /* 直接设置所有按钮之间的统一间隙，不用单独写margin */
   }
   

2. 按钮的公共样式里，把之前导致堆叠的width:40%、margin-left:30%、margin-right:30%、无效的top:30px删掉就行，不用加其他属性，按钮会自动横向并排、整体在导航栏内居中，后续要单独挪某个按钮的位置，直接给对应的按钮加margin-left/margin-right就能调整。

• 写了top: 30px但没给元素设position: absolute/relative，这个属性完全不会生效，属于无效代码
• 给容器设固定高度height:30px，但内容本身的高度（27px字体+上下10px padding）已经超过30px，会导致按钮溢出导航栏的边框，改成min-height就不会有这个问题
• 之前用margin: auto给按钮居中时，块级元素的margin:auto只能实现水平居中，不会自动把元素变成可并排的行内布局，所以才会出现“居中了但垂直堆叠”的效果

内容的提问来源于stack exchange，提问作者Fat Trat