HTML/CSS-如何在三个div中居中,独立于周围的div

我正在开发一个带有下拉菜单的小网站,只使用HTML/CSS。就其本身而言,这很好。我以前用TD,但嘿,DIVS规则,所以现在用DIVS。

我使用topmenu。在左侧,有许多菜单项,菜单的右侧也是如此。到目前为止一切都很好。由于只有两个div,一个左浮动,一个右浮动,并且在宽度为100%的containmer div中应用了相同的CSS,所以它看起来像一个大菜单栏。

当我想在同一菜单栏的屏幕中间添加一个小徽标时,问题就出现了。由于左侧和右侧菜单选项列表的宽度不完全相同(右侧菜单项列表略短),因此中间的徽标向右倾斜。

更糟糕的是,菜单选项列表是动态的,这取决于您所在的页面以及您是否登录。

我想要实现的是:

• 菜单栏上有三个部分:右菜单、中徽标、左菜单
• 中间徽标必须始终位于屏幕的正中央
• 调整浏览器窗口大小时;右侧零件自动调整大小以适应屏幕
• 中间徽标为固定宽度
• 调整大小时,左侧和右侧菜单只能调整到右侧或右侧菜单选项列表中最长的菜单所需的宽度
• 当然,不要包装!

我一直在努力,但失败得很惨,主要是因为我的知识不足。我建议只使用HTML/CSS,而不使用JS/jquery

我尝试在container div的css中使用backgorund图像,但在调整大小时,菜单选项最终会在中间的日志上流动。

这是下拉菜单的CSS(从web某处获得,不是我的代码)

.navbarl {
  overflow: hidden;
  background-color: #333;
  }

.navbarl a {
  float: left;
  font-size: 12px;
  color: white;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  font-weight: normal;
  }

.dropdown {
  float: left;
  overflow: hidden;
  }

.dropdown .dropbtn {
  font-size: 12px;    
  border: none;
  outline: none;
  color: white;
  padding: 8px 10px;
  background-color: #333;
  font-family: inherit;
  margin: 0;
  }

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #FFCC00;
  }

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  }

.dropdown-content a {
  float: none;
  color: black;
  padding: 8px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
  }

.dropdown-content a:hover {
  background-color: #ddd;
  }

.dropdown:hover .dropdown-content {
  display: block;
  }

HTML通常如下所示:

<div class="navbarl">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

我当然为我的网站更改了这个,并在菜单栏的右侧菜单中添加了第二个块。

这就是我现在拥有的完整菜单栏。我知道表格不适合格式化东西,但我尝试了许多不同的方法,这是我上次尝试的一个副本。正如我所说,我对div还是个新手,正在学习如何摆脱它们:-)

<table class=menu>
  <tr>
    <td class="menu_left">
      <div class="navbarl">
        <a href="/index.php">Home</a>
        <a href="/somesubfolder/index.php">Menu option 2 wih a long name</a>
        <div class="dropdown">
          <button class="dropbtn">Cursus&#9660;</button>
          <div class="dropdown-content">
            <a href="/somesubfolder/a.php">Be</a>
            <a href="/somesubfolder/b.php">One</a>
          </div>[![enter image description here][1]][1]
        </div>
        <a href="/misc/login.php">Login</a>
      </div>
    </td>
    <td class="menu_middle">
      <a href="http://www.budgetbytes.nl"><img class="menu_sponsor" src="/images/sponsor.png" alt=""/></a>
    </td>
    <td class="menu_right">
      <div class="navbarl">
        <a href="/misc/nieuws.php">Nieuws</a>
      </div>
    </td>
  </tr>
</table>

这是一个例子(我制作的标志不可见,这里不需要商业化,这是我们赞助商的标志)。你可以看到它是歪斜的