ul中心標誌？

我知道很多人都試圖做到這一點，並制定了一些剛好解決問題的系統，或者只是爲了「勉強」，但是最好的方法是什麼？我有幾乎完整的東西，但由於某種原因，徽標不是居中，而是整個ul。這就是我得到的。ul中心標誌？

enter image description here

但是，這是我得到當文本的長度是一樣的：

enter image description here

這裏是我的html：

<div class="navbar"> 

    <ul> 

     <li> 
      <a class="navbarLinks" href="#">Big Text Here</a> 
     </li> 

     <li> 
      <a class="navbarLogo" href="/"><img src="images/logo.png" width="100"></a> 
     </li> 

     <li> 
      <a class="navbarLinks" href="#">Small Text</a> 
     </li> 

    </ul> 

    <div class="divider"></div> 

</div>

而且我的CSS：

.navbar 
{ 
    margin:0 auto; 
    text-align: center; 
    z-index: 9999; 
    margin-top: 10px; 
} 

.navbar ul 
{ 
    display: inline-block; 
    list-style-type: none; 
    margin:0 auto; 
    padding: 0px; 
} 

.navbar li 
{ 
    display: inline-block; 
    list-style-type: none; 
    vertical-align: middle; 
} 

.navbarLinks 
{ 
    color:#ccc; 
    margin: 20px; 
    text-align:center; 
    display:block; 
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; 
    text-decoration: none; 
    font-family: arial; 
    font-size: 20pt; 
    font-weight: bold; 
} 

.navbarLinks:hover 
{ 
    color:#fff; 
} 

.navbarLogo 
{ 
    padding-bottom: 0px; 
    text-align: center; 
}

我該如何修復我的代碼？

來源

2013-11-04 Hunter Mitchell

[flexbox解決]（http://philipwalton.github.io/solved-by-flexbox/），如果你不介意放棄IE 9及以下。 – Eevee

我確實需要這些。有沒有一種CSS方式？ –

flexbox是CSS :)只是很近。 – Eevee

最簡單的方法，儘管是一個巨大的黑客攻擊，只是給出了左右<li> s的比例，例如40％左右的width。然後，他們將保持相同的尺寸，同時在中間留下一點空白。

最好的辦法是使用Flexbox的，它可以讓你直接說你想要什麼，即兩個文本部分之間的分裂任何額外的空間：

.navbar ul { 
    display: flex; 
} 
.navbar li.navbarLinks { 
    flex: 1; 
}

這只是說：在ul應該是一個flexbox（意思是它的所有孩子應該坐在一排並填充可用空間），並且應該以1：1的比例給鏈接提供任何額外的空間。

這是crappy fiddle。

缺點是，這隻適用於pretty recent browsers，特別是IE10是第一個支持它的IE。和對語法進行了三次修改，因此您需要支持這些修改，也許需要使用類似Sass flex mixin（即使您正在編寫靜態CSS也是有用的參考）。

另一方面，您可以使用兩種方法。不理解flexbox的瀏覽器將會服從inline-block，而只是看到稍微偏離中心的徽標。

來源

2013-11-05 00:19:46 Eevee

這是一種方式，但我希望它是一個非黑客 –

回答

相關問題