如何在非Bootstrap环境下将图片置于导航栏中央

没问题，我来给你唠唠不用Bootstrap怎么把图片稳稳放在导航栏中央～下面给你两种实用的方法，你可以根据自己的现有代码结构选：

方案一：基于现有列表结构的快速改造 #

这种方法改动你的原有HTML最少，只需要给图片项加个特殊类，再用CSS定位实现居中：

修改后的HTML #

<nav class="navigation">
  <ul class="navigation-list">
    <li class="navigation-list-item"><a href="#home">Home</a></li>
    <li class="navigation-list-item"><a href="#features">Features</a></li>
    <!-- 中间的图片项，加个专属类方便定位 -->
    <li class="navigation-list-item logo-item">
      <a href="#home">
        <img src="你的图片URL" alt="导航Logo" class="nav-logo">
      </a>
    </li>
    <li class="navigation-list-item"><a href="#add-info">Add info</a></li>
    <li class="navigation-list-item"><a href="#contact">Contact</a></li>
  </ul>
</nav>

对应的CSS #

/* 先重置默认样式，避免浏览器自带的边距搞破坏 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navigation {
  background: #fff; /* 可按需改背景色 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选，加个阴影让导航更立体 */
  padding: 0.5rem 1rem;
}

.navigation-list {
  list-style: none;
  display: flex; /* 让列表项横向排列 */
  align-items: center; /* 垂直方向居中，保证文字和图片对齐 */
  justify-content: space-between; /* 让左右菜单项分别靠两端 */
  position: relative; /* 给绝对定位的logo项做参照 */
}

/* 核心：把logo定位到导航中央 */
.logo-item {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 向左挪自身宽度的一半，实现精准居中 */
}

.nav-logo {
  height: 40px; /* 按需调整图片高度，和导航栏高度匹配 */
  width: auto; /* 保持图片比例不变 */
}

/* 给非logo的菜单项加间距，避免和logo重叠 */
.navigation-list-item:not(.logo-item) {
  margin: 0 1rem;
}

/* 链接样式，按需调整 */
.navigation-list-item a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.navigation-list-item a:hover {
  color: #007bff; /* hover时的颜色，可选 */
}

方案二：分栏式布局（结构更清晰） #

如果你的导航后续可能加更多内容，这种分左、中、右三栏的方式扩展性更好：

调整后的HTML #

<nav class="navigation">
  <div class="nav-container">
    <!-- 左侧菜单项 -->
    <div class="nav-section nav-left">
      <ul class="nav-menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#features">Features</a></li>
      </ul>
    </div>
    <!-- 中央图片 -->
    <div class="nav-section nav-center">
      <a href="#home">
        <img src="你的图片URL" alt="导航Logo" class="nav-logo">
      </a>
    </div>
    <!-- 右侧菜单项 -->
    <div class="nav-section nav-right">
      <ul class="nav-menu">
        <li><a href="#add-info">Add info</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

对应的CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navigation {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 0.5rem 1rem;
}

.nav-container {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 三个栏平分宽度 */
.nav-section {
  flex: 1;
}

/* 中央栏内容居中 */
.nav-center {
  display: flex;
  justify-content: center;
}

/* 左侧菜单靠左排列 */
.nav-left .nav-menu {
  display: flex;
  justify-content: flex-start;
  list-style: none;
}

/* 右侧菜单靠右排列 */
.nav-right .nav-menu {
  display: flex;
  justify-content: flex-end;
  list-style: none;
}

.nav-menu li {
  margin: 0 1rem;
}

.nav-logo {
  height: 40px;
  width: auto;
}

.nav-menu li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

两种方案都不需要Bootstrap，用原生CSS的Flexbox和定位就能搞定，你可以根据自己的需求选～

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