水平中心徽标和导航栏

Question

如何将我的徽标（img）和菜单链接居中。我希望徽标位于左侧，菜单位于右侧但水平居中。 这是我的代码！

感谢

<div class="menu-container"> 
    <div class="logo"> 
    <a href="#"><img src=https://app.box.com/representation/file_version_186133299510/image_2048/1.png class="logo"></a> 
    </div> 
    <nav class="menu"> 
       <a href="#">Branding</a> 
           <a href="#">Logos</a> 
           <a href="#">Illustration</a> 
           <a href="#">Web</a> 
           <a href="#">Poster</a> 
           <a href="#">Letters</a> 
           <a href="#">All</a> 
           <a href="#">About</a> 
    </nav> 

</div> 
<div class="main-intro"> 
     <h2>Let's create something great together!</h2> 
    </div> 

--- CSS ---

* { 
    padding: 0px; 
    margin: 0px; 
} 

.menu-container{ 
    background-color: gray; 
    margin: 30px; 
    position 


} 

.logo { 
    height: 10em; 
    display: inline-block; 
    padding: 1em; 
    transition: all 0.6s ease; 
    -webkit-transition: all 0.6s ease; 
} 


.menu { 
    float: right; 
    margin: 2em; 2em; 0; 0; 
    display: inline-block; 
    vertical-align: center; 
} 

https://codepen.io/Randomood/pen/KmJpWX?editors=1100

Answer 1

尝试删除您的标志的高度，从你的CSS？

.logo { 
    display: inline-block; 
    padding: 1em; 
    transition: all 0.6s ease; 
    -webkit-transition: all 0.6s ease; 
} 

编辑：

* { 
    padding: 0px; 
    margin: 0px; 
} 

.menu-container{ 
    background-color: gray; 
    margin: 30px; 
    position: relative; 
    padding: 1em; 
} 

.logo { 
    height:10em; 
    border: 1px solid red; 
    display: inline-block; 
    transition: all 0.6s ease; 
    -webkit-transition: all 0.6s ease; 
} 

.menu { 
    float: right; 
    margin: 4.5em 0em; 
    display: inline-block; 
    vertical-align: center; 
} 

Answer 2

刚刚尝试这样做是为了你的 “菜单式集装箱”

.menu-container{ 
    display:flex; 
    flex-direction:row; 
    justify-content:center; 
    background-color: gray; 
    margin: 30px; 
} 

Codepen