HTML/CSS - 如何将中间的 div 三者居中，独立于周围的 divs

Question

我正在开发一个带有下拉菜单的小型站点，仅使用 HTML/CSS。这本身就很好用。我以前使用 TD，但是，嘿，DIVS 规则，所以现在使用 DIV。

我使用顶部菜单。在左侧，有许多菜单项，菜单的右侧也是如此。到目前为止一切都很好。由于只有两个 div，一个向左浮动，一个向右浮动，并且都在宽度为 100% 的容器 div 中应用相同的 CSS，看起来就像一个大菜单酒吧.

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

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

我想达到的效果是这样的：

菜单栏有3个部分：右菜单、中间logo、左菜单
中间的徽标必须始终位于屏幕的正中央
调整浏览器大小时window，左右部分会自动调整大小以适合屏幕
中间的标志是固定宽度
调整大小时，左右菜单只能调整到右侧或右侧菜单选项列表中最长的所需的宽度
当然没有换行！

我一直在努力，但惨遭失败，主要是我的知识不够。我更喜欢只使用 HTML/CSS 而不是 JS/jquery

我尝试在容器 div 的 css 中放置背景图像，但是随后，在调整大小时，菜单选项最终会溢出中间的日志。

这是下拉菜单的 CSS（从网上的某个地方获取的，不是我的代码）

.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>

这是一个例子（标志我隐藏了，这里不需要商业化，这是我们赞助商的标志）。你可以看到它的歪斜

Answer 1

这就是 flexbox 派上用场的地方。我建议您不要将 table 用于布局，因为它会被错误地使用，就像 float 仅用于将图像放置在文本的一侧。

我已经做了一个快速、简单的示例，说明如何使用 flexbox 创建导航菜单。自然地，您会希望在较小的视口宽度上创建移动菜单。

HTML

<header role="navigation">
    <div class="nav menu nav1">
        <a href="#" tabindex="0" class="menu-item">Home</a>
        <a href="#" tabindex="0" class="menu-item">News</a>
        <div class="menu-dropdown menu-item">
            <p tabindex="0">Dropdown</p>
            <a href="#" tabindex="0">Link 1</a>
            <a href="#" tabindex="0">Link 2</a>
            <a href="#" tabindex="0">Link 3</a>
        </div>
    </div>
    <div class="menu logo">
        <a href="#" tabindex="0" title="Click to go to homepage">
            <img src="http://media.gettyimages.com/photos/blue-eyed-husky-puppy-picture-id178375154?s=170x170&w=1007" alt="Husky puppy">
        </a>
    </div>
    <div class="nav menu nav2">
        <a href="#" tabindex="0" class="menu-item">About</a>
        <a href="#" tabindex="0" class="menu-item">Contact</a>
    </div>
</header>

CSS (scss)

header {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;

    .nav {
        width: 42.5%;
    }

    .logo {
        width: 15%;
    }

    .menu {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        .menu-dropdown {
            height: 20px;
            margin-bottom: -5px;

            p {
                cursor: pointer;
                margin: 0;

                &:focus, &:hover {
                    ~ a {
                        display: block;
                    }
                }
            }

            a {
                display: none;
            }

            &:focus, &:hover {
                height: 70px;
                margin-bottom: -55px;

                a {
                    display: block;
                }
            }
        }

        img {
            width: 100px;
        }
    }
}

例子

https://codepen.io/anon/pen/vjXaVW

说明

Flexbox 是一种 CSS 布局技术，它使用浏览器的 CSS 引擎来动态排列元素。 flexbox 无需手动分配宽度，而是为我们完成繁重的工作。

Learn More about Flexbox

.some-random-class {
    align-items: center; // I'm telling the element to arrange its children to be vertically centered
    display: flex; // Declaring that this element will be using flexbox; it's like flipping the "Flexbox Switch" to on.
    flex-wrap: nowrap; // I'm telling the element to never allow its children to wrap (i.e. fold over). Using "wrap" instead of "nowrap" tells the element to definitely allow its children to wrap (i.e. fold over)
    justify-content: center; // I'm telling the element to horizontally center its children. There are more options than just "center"
}

使用 justify-content: center;，菜单和徽标将始终位于页面中央。请注意，<div class='menu logo'></div> 元素位于其他两个 div 元素之间，另外这两个 div 元素包含菜单项。

HTML/CSS - 如何将中间的 div 三者居中，独立于周围的 divs

HTML/CSS - How to center the middle div out of three, independent of surrounding divs

html

css

center

alignment