如何在Bootstrap导航栏中通过CSS实现居中 Logo 的特殊布局？-css教程-PHP中文网

navbar-brand无法用text-center居中，因为.navbar是flex容器，text-center只作用于内联内容且不改变flex子项位置；必须用绝对定位或三栏flex结构实现可靠居中。

如何在bootstrap导航栏中通过css实现居中 logo 的特殊布局？

为什么 `navbar-brand` 无法用 `text-center` 居中？

Bootstrap 的 .navbar 默认是 flex 布局，.navbar-brand 被包裹在 .navbar-nav 或独立放在左侧，单纯加 text-center 到父容器无效——因为 flex 主轴方向（row）下，文本居中不等于元素居中，且 .navbar-brand 没有占据整行宽度。

用 `justify-content-center` + `position-absolute` 组合实现真居中

最稳定的做法是脱离 flex 流，手动定位 Logo。前提是导航栏高度固定（如默认的 4rem），否则垂直居中会漂移。

给 .navbar 添加 position-relative
给 .navbar-brand 添加 position-absolute、top: 50%、left: 50%、transform: translate(-50%, -50%)
确保 .navbar-brand 不被其他元素遮挡（可加 z-index: 100）
原左右导航菜单需用 ms-auto / me-auto 分开，避免挤压 Logo

示例结构：

<nav class="navbar navbar-expand-lg position-relative"><div class="container-fluid">
    <a class="navbar-brand position-absolute top-50 start-50 translate-middle" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav"></button>
    <div class="collapse navbar-collapse" id="nav">
      <ul class="navbar-nav me-auto">...</ul>
<ul class="navbar-nav ms-auto">...</ul>
</div>
  </div>
</nav>

响应式下 Logo 居中失效怎么办？

折叠菜单激活时（navbar-collapse 展开），position-absolute 的 Logo 会脱离文档流，可能盖住下拉内容或错位。必须用媒体查询重置：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

在 @media (max-width: 991.98px) 下，取消 position-absolute 和 translate
改用 text-center 包裹 .navbar-brand，并设 width: 100%
同时隐藏左右导航菜单（navbar-nav 在折叠态本就隐藏，无需额外操作）

关键 CSS：

@media (max-width: 991.98px) {
  .navbar-brand.position-absolute {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }
  .navbar-brand {
    width: 100%;
    text-align: center;
  }
}

用 `flex-grow-1` + `text-center` 的替代方案（仅限 Bootstrap 5.3+）

如果不想写额外 CSS，Bootstrap 5.3 引入了更语义化的方案：把 Logo 放在 .navbar-nav 中间，用 flex-grow-1 撑开两侧空间。

结构上，将 .navbar-brand 放进 <ul class="navbar-nav"></ul>，前后各放一个空 <li class="nav-item flex-grow-1">
Logo <li> 加 text-center，并设 flex-grow-0 防止被拉伸
该方案在移动端折叠后会破坏布局，仍需配合媒体查询还原为堆叠式
兼容性差于绝对定位法，且对 navbar-nav 内部顺序敏感