Question

我在将浮动div置于页面中心时遇到问题。我的结构就是这样。

<header>
   <nav class="navbar" role="navigation">
      <div class="NavContainer">
         <div class="logo">
          image content here wrapped in a link
         </div>
         <div class="menu">
           Menu links here wrapped in ul's
         </div>
      </div>
   </nav>
</header>

我的css当前看起来像这样一小部分：但是，当我的宽度小于768像素时，其目的只是将它们居中放置。

 @media screen and (min-width: 576px) {
    .Menu {
        width: 540px;
        margin-left: auto;
        margin-right: auto;
    }

    .NavContainer {
        width: 540px;
        margin-left: auto;
        margin-right: auto;
    }

    .Logo {
        width: 540px;
        margin-left: auto;
        margin-right: auto;
    }
    #menu-main-menu-1 {
        width: 479.5px;
        margin-left: auto;
        margin-right: auto;
    }
}

    @media screen and (min-width: 768px) {
        .Menu {
            margin-top: 1em;
            margin-left: 1em;
        }

        .NavContainer {
            width:720px;

        }
    }

    @media screen and (min-width: 992px) {
        .Menu {
            margin-top: 6em;
            margin-left: 5em;
            clear: none;
        }

        .NavContainer {
            width:920px;

        }

        #menu-main-menu-1 li:not(:first-child):before {
            content: "";
            margin-right: 5px;
        }
    }

    @media screen and (min-width: 1200px) {
        .Menu {
            width:625px;
            /*max-width: 625px;
            min-width: 625px;*/
        }

        .NavContainer {
            width:1140px;

        }

        #menu-main-menu-1 li:not(:first-child):before {
            content: "|";
            margin-right: 20px;
        }
    }

我一直在尝试许多不同的方法来解决此问题，在这种情况下，我通常无法使工作正常的方法。是什么让我无法使用float：left和margins-left和margins-right自动边距？

编辑：

我用这个CSS解决了它。我从下面标记为答案的答案中得到启发

.NavContainer {
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
        padding: 15px;
    }

    .Logo {
        margin-left: auto;
        margin-right: auto;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
    }

    #menu-main-menu-1 {
        margin-left: auto;
        margin-right: auto;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
    }

Answer 1

使用此代码

.NavContainer
{
display: -webkit-box; 
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}

<header>
   <nav class="navbar" role="navigation">
      <div class="NavContainer">
         <div class="logo">
          image content here wrapped in a link
         </div>
         <div class="menu">
           Menu links here wrapped in ul's
         </div>
      </div>
   </nav>
</header>

使嵌套浮动元素居中

1 个答案: