如何实现容器内左中右浮动div垂直对齐以制作Bootstrap导航栏

核心问题排查 #

你代码里的问题主要集中在以下几点：

• 选择器不匹配：CSS中写的是.container类选择器，但HTML里的容器是id="container"，对应的选择器应该是#container，导致容器的样式完全没生效
• 百分比高度无效：子元素设置百分比高度的前提是所有父级元素都有明确的高度值，你没有给html、body、容器设置高度，height:7%的设置是无效的
• 垂直对齐写法错误：vertical-align没有center这个属性值，正确值是middle，且这个属性仅对行内元素、表格单元格生效，浮动元素设置该属性不会起作用
• 行高设置错误：line-height:10%是相对于当前字体大小的10%，只会压缩行高，完全无法实现垂直居中的效果
• 浮动布局的居中逻辑错误：中间的.centro设置margin:0 auto的同时左右元素是浮动状态，无法实现在同一行水平居中的效果

修复方案（改用Flex布局实现，不需要浮动，兼容你现有代码逻辑） #

修改后的CSS代码

/* 先给父级元素设置高度，确保后续高度设置生效 */
html, body {
  height: 100%;
  margin: 0;
}
/* 选择器改为id选择器匹配HTML结构，用flex布局实现三栏排列+垂直居中 */
#container {
  width: 100%;
  height: 7%; 
  font-size: 11px !important;
  display: flex;
  /* 垂直居中核心属性 */
  align-items: center;
  /* 三栏左右贴边、中间居中的水平排列规则 */
  justify-content: space-between;
}

.sinistra {
  width: 30%;
  background-color: white !important;
}

.centro {
  width: 30%;
  /* 让中间内容自身水平居中 */
  text-align: center;
}

.destra {
  width: 40%;
  /* 让右侧导航靠右排列 */
  display: flex;
  justify-content: flex-end;
}

a {
  font-size: 11px !important;
}

HTML代码不需要做任何修改，直接使用你原有代码即可。

更简洁的Bootstrap原生实现方案 #

你已经引入了Bootstrap5，可以直接用Bootstrap自带的Flex工具类实现，不需要写自定义CSS：
仅需要调整容器div的类，其余子元素结构不变：

<div id="container" class="d-flex align-items-center justify-content-between w-100" style="height:7%;font-size:11px">
  <!-- 原有三个子div内容保持不变 -->
</div>

再给三个子元素分别加Bootstrap类：.sinistra加w-30、.centro加w-30 text-center、.destra加w-40 d-flex justify-content-end即可。

内容的提问来源于stack exchange，提问作者xKlapiz _