CSS，导航中的对中元素

-1

简单的问题，出了什么问题？我有菜单和徽标，我不能以此为中心。我不知道为什么。CSS，导航中的对中元素

我的CSS代码：

#header { 
 
    width: 100%; 
 
    background-color: #515963; 
 
} 
 

 
#header #logo { 
 
    width: 200px; 
 
    margin-left: 80px; 
 
    padding: 20px; 
 
    float: left; 
 
} 
 

 
#header nav { 
 
    float: right; 
 
    margin-right: 80px; 
 
    line-height: 104px; 
 
} 
 

 
#header nav .menuItem { 
 
    float: right; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    font-size: 22px; 
 
    letter-spacing: 0.8px; 
 
    font-weight: 500; 
 
    padding: 10px 30px 10px 10px; 
 
} 
 

 
#header nav .menuItem .item { 
 
    cursor: pointer; 
 

 
#header #logo { 
 
    display: block; 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    clear: both; 
 
    } 
 
    #header nav { 
 
    clear: both; 
 
    width: 369px; 
 
    margin: 0 auto; 
 
    line-height: 104px; 
 
    } 
 
    #header nav .menuItem { 
 
    padding: 0; 
 
    }

<div id="header"> 
 
     <a href="#"><img id="logo" src="img/logo.png" alt="AFP"/></a> 
 
     <nav> 
 
     <div class="menuItem item1"><span class="item">kontakt</span></div> 
 
     <div class="menuItem item2"><span class="item">produkty</span></div> 
 
     <div class="menuItem item3"><span class="item">o nas</span></div> 
 
     <div style="clear:both;"></div> 
 
     </nav> 
 
     <div style="clear:both;"></div> 
 
</div>

什么，我已经有了：

我使用格 S IN导航，因为我喜欢这样做。我想让徽标和菜单居中。我知道宽度，我不明白为什么margin: 0 auto;不起作用。

编辑：

我想达到这样的事：

来源

2017-02-13 Karol

对不起，它的存在。我的坏，我会把它放在上面的代码 – Karol

你提供的代码不会产生像你的屏幕截图。请创建一个[MCVE] – Turnip

我刚刚编辑 – Karol

简单的错误。您需要id没有标记http://joxi.ru/eAOYEqBuxvRD9m

来源

2017-02-13 20:51:08

它在那里，我的坏，我刚刚编辑 – Karol

请不要链接到外部代码源（或任何在链接的末尾;作为安全措施，我不点击链接到域我不知道）。在答案中包含任何代码。 –

这种情况的最佳方式是flexbox。

#header{ 
 
    display:flex; 
 
    justify-content:center; 
 
    width: 100%; 
 
    flex-wrap:wrap; 
 
    -webkit-flex-wrap:wrap; 
 
} 
 
#header #logo 
 
{ 
 
    width:100px; 
 
} 
 
nav{ 
 
    display:flex; 
 
    justify-content:center; 
 
    width: 100%; 
 
} 
 
nav div { 
 
\t margin: 10px; 
 
}

<div id="header"> 
 
     <a href="#"><img id="logo" src="https://www.gravatar.com/avatar/087039a00851e75ff483470e3aba89c9?s=48&d=identicon&r=PG" alt="AFP"/></a> 
 
     <nav> 
 
     <div class="menuItem item1"><span class="item">kontakt</span></div> 
 
     <div class="menuItem item2"><span class="item">produkty</span></div> 
 
     <div class="menuItem item3"><span class="item">o nas</span></div> 
 
     
 
     </nav> 
 
     <div style="clear:both;"></div> 
 
</div>

来源

2017-02-13 21:05:23

我编辑了答案。请看看并让我知道结果。在答案我改变了图像的网址。 –

CSS，导航中的对中元素

回答

相关问题