如何使用 flexbox 使菜单居中 [关闭]

Posted

技术标签:

【中文标题】如何使用 flexbox 使菜单居中 [关闭]【英文标题】：How to center a menu using flexbox [closed] 【发布时间】：2017-01-18 00:43:47 【问题描述】：

我有一个第二行菜单，我想使用 flexbox 居中。我是 flexbox 新手，有几个问题：

    当我在 DreamWeaver CS6 中验证 html 时，它无法识别元素 top_row、left_button 和 right_button。然而，我遵循了一些关于 flexbox 的示例，表明这是一种正确的格式。我对这些元素定义做错了什么？ 如何让宽度为 875 像素的“主菜单”行在我展开窗口以使其更宽和更窄时保持居中？现在它保持左对齐。 如何让left_button（主页）在窗口变宽和变窄时与主菜单的左侧对齐？现在它保持左对齐。 当窗口变宽和变窄时，如何让 right_button（后退）与主菜单的右侧对齐？现在它与扩大或缩小窗口的右侧对齐。 如何获得“文本装饰：无；”属性才能工作，以便按钮上没有下划线？

这是我第一次尝试使用 flexbox 时的示例代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    body 
      background: #EEE8AA;
    
    #main 
      margin: 0px;
      padding: 0px;
      display: flex;
      flex-flow: row;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      line-height: 25px;
      text-align: center;
      max-width: 875px;
      align-items: center;
      justify-content: space-between;
    
    #main > top_row 
      background: #BDB76B;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 875px;
      height: 25px;
    
    #main > left_button 
      margin: 5px;
      background: #BDB76B;
      order: 1;
      position: absolute;
      left: 0;
      width: 150px;
      text-decoration: none;
    
    #main > right_button 
      margin: 5px;
      background: #BDB76B;
      order: 3;
      position: absolute;
      right: 0;
      width: 150px;
      text-decoration: none;
    
  </style>
  <title>Sample Title</title>
</head>

<body>
  <div id="main">
    <top_row>Main Menu</top_row>
  </div>
  <br />
  <div id="main">
    <left_button><a href="http://www.msn.com/">Home</a>
    </left_button>
    <right_button><a href="#" onclick="history.go(-1)">Back</a>
    </right_button>
  </div>
</body>

</html>

当它工作时，我会将&lt;style&gt; 标记信息移动到一个 CSS 文件中。 感谢您查看此内容。

【问题讨论】：

这真的很宽泛，而且显然不仅仅是一个单独的问题，甚至是“几个问题”。但是我会回答你的#1，其余的你可能想用minimal examples 使用codepen 或jsfiddle 或其他东西在你得到#1 的平方之后分解成更简洁的问题。无论如何，您的 #1 是预期的，因为您尚未通过 document.registerElement 注册您的自定义 html 标签，所以无论您放入什么都不知道您在说什么，包括您的所见即所得编辑器......干杯！ :) 【参考方案1】：

基本 HTML5

    您好像在使用 DWCS6？如果是这样，请将您的新页面作为 HTML5 开始。标记中的第一个标签是 HTML4 的回归。只需从您创建的每个页面开始：

    &lt;!DOCTYPE html&gt;

    最基本的&lt;meta&gt;标签应该是：

    &lt;meta charset='utf-8'&gt;

    有一个finite amount of actual tags you can use in HTML5 这些是NOT标签，所以它会验证失败：

    &lt;top_row&gt;&lt;right_button&gt;&lt;left_button&gt;

    具有id='main' 的标签不止一个。有一条基本规则永远不应该被打破：

    请勿在每个文档中使用多个元素/标签上的 ID

    改为使用类，它可以用于任意数量的标签。 ID几乎没有用，因为它的限制。一旦你开始使用 javascript，它对你来说会更有价值。

在下面的代码片段中，我重构了 OP。评论是细节和问题的答案。顺便说一句，SO (***) 对多个问题不满意，因此在发布问题时，请尝试将其最小化为特定问题，并确保制作 Snippet 或 Plunker 来展示您的示例（我已经为您做过）。请记住，guidelines 后面的问题和Minimal, Complete, and Verifiable example 将吸引更多愿意发布答案的人。

片段

<!DOCTYPE html><!-- <>QUESTION 1<> -->
<html>

<head>
  <meta charset="utf-8">
  <title>SO39418788</title>
  <style>
    /*[OPTIONAL] 
    | The next 3 rulesets are a reset that you
    | can apply to almost any webpage.
    */
    html 
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      font: 400 16px/1.428 Arial, Helvetica, sans-serif;
    
    body 
      width: 100%;
      height: 100%;
      background: #EEE8AA;
    
    *,
    *:before,
    *:after 
      box-sizing: inherit;
      margin: 0;
      padding: 0;
      border: 0 none transparent;
    
    /*[FLEX CONTAINER]
    | <>QUESTIONS 2, 3, and 4<>
    | Using a container that encompasses all tags
    | will give you more control. Having trouble 
    | with 3 tags? 50 tags? Wrap a container 
    | around them and you'll have influence
    | over them as a group. This will save you
    | from writing extra repetitive code 
    | because the descendants of the container
    | will inherit the styles. 
    */
    .top 
      display: flex;
      /*
      | flex-flow is not 100% with all browsers.
      | It's safer to use flex-direction
      */
      flex-direction: row;
      line-height: 25px;
      text-align: center;
      /* <>QUESTION 2<> */
      width: 100%; 
      max-width: 875px;
      justify-content: space-between;
      position: relative;
      /* <>QUESTION 2<> 
      | As long as the element is a block this 
      | style will center it horizontally.
      */
      margin: 0 auto;
    
    .center 
      background: #BDB76B;
      flex: 2 0 auto;
      order: 2;
      font-size: 1.4rem;
    
    .left 
      margin: 5px;
      background: #BDB76B;
      order: 1;
      position: absolute;
      left: 0;
      width: 150px;
    
    .right 
      margin: 5px;
      background: #BDB76B;
      order: 3;
      position: absolute;
      right: 0;
      width: 150px;
    
    a,
    a:link,
    a:visited 
      color: rgba(122, 2, 14, .8);
      /* <>QUESTION 5<>
      | Apply the style directly on <a> 
      */
      text-decoration: none;
    
    a:hover,
    a:active 
      background: #000;
      color: #BDB76B;
    
  </style>

</head>

<body>
  <header class='top'>

    <button class='left'>
      <a href="http://www.msn.com/">Home</a>
    </button>

    <h1 class='center'>Main Menu</h1>

    <button class='right'>
      <a href="#" onclick="history.go(-1)">Back</a>
    </button>

  </header>
</body>

</html>

【讨论】：

谢谢 zer00ne。我有一些小的调整要做，但这让我到了那里。非常感谢您的帮助。 没问题，我看到你对学习很认真。如果你打算经常使用 SO，你应该把你的名字改成更容易记住的名字。这样一来，如果我注意到您有问题，我就会知道这是一篇值得回答的严肃帖子。

以上是关于如何使用 flexbox 使菜单居中 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章

Flexbox：如何垂直居中[重复]

使用 flexbox 使文本居中，然后将剩余 50% 的按钮居中 [重复]

如何使导航菜单中的文本居中

在元素的一部分上居中 Flexbox

由于填充，Flexbox 无法使文本居中

如何使用 flexbox 垂直居中 div [重复]