HTML/CSS：如何使用flexbox在navbar中居中標題？

我很新的HTML編程和嘗試一些新的東西，所以請記住這一點;）我試圖將我的標題（倫敦）在我的navbar，而標題之前的其他鏈接保持在左側，以及留在右側後的那些。HTML/CSS：如何使用flexbox在navbar中居中標題？

我試圖在標題上使用margin auto，但我似乎無法正確使用。你有什麼建議嗎？

.nav { 
 
    width: 800px; 
 
    display: flex; 
 
    background: blue; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 

 
body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.nav ul { 
 
    padding: 0 5; 
 
    list-style-type: none; 
 
    background: white; 
 
    display: flex; 
 
    align-items: center; 
 
    background: none; 
 
    flex-wrap: wrap; 
 
} 
 

 
.nav ul li a { 
 
    text-decoration: none; 
 
    padding: 0px 22px; 
 
    display: block; 
 
    line-height: 1; 
 
    color: black; 
 
} 
 

 
<!--#overskrift { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    -->

<nav class="nav"> 
 
    <ul> 
 
    <li> 
 
     <i class="fa fa-home"></i> 
 
     <a href="#">Hjem</a></li> 
 
    <li> 
 
     <i class="fa fa-map-marker" aria-hidden="true"></i><a href="#">Kart</a></li> 
 
    <li> 
 
     <i class="fa fa-bed" aria-hidden="true"></i> 
 
     <a href="#">Hotel</a></li> 
 
    <li id="overskrift"><i class="fa fa-building" aria-hidden="true"></i>london</li> 
 
    <li id="sok"> 
 
     <form><input placeholder="søk" /><i class="fa fa-search"></i></form> 
 
    </li> 
 
    <li><i class="fa fa-info-circle" aria-hidden="true"></i><a href="#">Informasjon</a></li> 
 
    <li id="facebook"><i class="fa fa-facebook-official" aria-hidden="true"></i><a href="#">Lik oss!</a></li> 
 
    </ul> 
 
</nav>

來源

2017-09-24 Kathiravann

嘗試在.nav ul li a使用display: inline-block;。

來源

2017-09-24 19:45:38

HTML/CSS：如何使用flexbox在navbar中居中標題？

回答

相關問題