ul的中心圖像

Question

試過谷歌這個，但沒有找到任何幫助我的東西。 所以我有左右兩邊的按鈕文字，但我想要在頂部欄中放置一個圖像。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #f3f3f3; 
 
    } 
 

 
    li { 
 
    float: left; 
 
    } 
 

 
    li a { 
 
    display: block; 
 
    color: #666; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    } 
 

 
    li a:hover:not(.active) { 
 
    background-color: #ddd; 
 
    } 
 

 
    li a.active { 
 
    color: white; 
 
    background-color: #3744a2; 
 
    }

<ul> 
 
    <li><a href="../index.html">home</a></li> 
 
    <li><a href="../news/news.html">news</a></li> 
 
    <li><a href="../services/services.html">services</a></li> 
 
    <li><a class="active" href="#">prices</a></li> 
 
    <li><a href="../contat/contat.html">contat</a></li> 
 
    <li><a class="image" href="#"><img src="https://dummyimage.com/150X38/000/fff"></a></li> 
 
    <li style="float:right"><a href="mailto:enter@email.here"><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp; enter@email.here</a></li> 
 
    <li style="float:right"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>&nbsp; 123 123 123</a></li> 
 
    </ul>

所以我想basicly是圖像（類= 「圖像」）爲中心，但因爲它是休息。

非常感謝！

Answer 1

做這樣的

從a標籤取下image級，並給予image類到它的父li和嘗試這個這個例子。它會幫助你

ul { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
background-color: #f3f3f3; 
 
text-align: center; 
 
} 
 

 
li { 
 
float: left; 
 
} 
 

 
li a { 
 
display: block; 
 
color: #666; 
 
text-align: center; 
 
padding: 14px 16px; 
 
text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
background-color: #ddd; 
 
} 
 

 
li a.active { 
 
color: white; 
 
background-color: #3744a2; 
 
} 
 
li.image { 
 
    float: none; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li><a href="../index.html">home</a></li> 
 
<li><a href="../news/news.html">news</a></li> 
 
<li><a href="../services/services.html">services</a></li> 
 
<li><a class="active" href="#">prices</a></li> 
 
<li><a href="../contat/contat.html">contat</a></li> 
 
<li class='image'><a class="" href="#"><img src="../image/image.png"></a></li> 
 
<li style="float:right"><a href="mailto:enter@email.here"><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp; enter@email.here</a></li> 
 
<li style="float:right"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>&nbsp; 123 123 123</a></li> 
 
</ul>

Answer 2

a.image { 
    display: block; 
    margin-left: auto; 
    margin-right: auto 
} 

嘗試在您的css文件中添加該代碼。也請嘗試看看here 它有更多關於居中事物的信息。

Answer 3

我所用的顯示：彎曲和柔性特性。通過設置顯示：flex：0我告訴瀏覽器我想要這個元素只需要他需要的地方，並且對於單個元素使用flex：1我告訴我希望它將所有可能的位置放在一起

div.nav { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #f3f3f3; 
 
    display: flex; 
 
    } 
 

 
    div.left-part, div.right-part { 
 
    flex: 0; 
 
    display:inline-block; 
 
    white-space: nowrap; 
 
    } 
 

 
    div.center-part { 
 
    flex: 1; 
 
    text-align: center; 
 
    } 
 

 

 
    div.nav-button { 
 
    display:inline-block; 
 
    } 
 

 
    div.nav-button a { 
 
    display: block; 
 
    color: #666; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    } 
 

 
    div.nav-button a:hover:not(.active) { 
 
    background-color: #ddd; 
 
    } 
 

 
    div.nav-button a.active { 
 
    color: white; 
 
    background-color: #3744a2; 
 
    }

<div class="nav"> 
 
    <div class="left-part"><div class="nav-button"><a href="../index.html">home</a></div> 
 
    <div class="nav-button"><a href="../news/news.html">news</a></div> 
 
    <div class="nav-button"><a href="../services/services.html">services</a></div> 
 
    <div class="nav-button"><a class="active" href="#">prices</a></div> 
 
    <div class="nav-button"><a href="../contat/contat.html">contat</a></div> 
 
    </div> 
 
    <div class="center-part"> 
 
    <div class="nav-button"><a class="image" href="#"><img src="../image/image.png"></a></div> 
 
    </div> 
 
    <div class="right-part"> 
 
    <div class="nav-button"><a href="mailto:enter@email.here"><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp; enter@email.here</a></div> 
 
    <div class="nav-button"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>&nbsp; 123 123 123</a></div> 
 
    </div> 
 
</div>