css - リストの中央に配置された画像を整列する

Question

私は検索するのが面倒すぎるため、誰かに私のコードをフィードして欲しいと思うように、この質問がどのように聞こえるか分かります。そうではありません。

私はこのようなメニューを作成しようとしています： そして私はその効果を得ることができません。

イメージがインラインになってテキストが隠れないようにしたいのですが、ダイナミックにしたいのですが、私は6つの要素がなくてもイメージを整えています。リスト、私は常にそこにいるイメージをしたい。それ以外のイメージは、私が望むものをかなり描写しています。私が今取得したのはこれです：

ここに私が持っているものがあります： それは私が欲しいものではありません。それは私の例のように反応しません。どこに5つのアイテムがありますか（サイズが違うとオプションです）、イメージはまだ中央に位置しています。それをどうすれば実現できますか？

編集：コードが少し更新されましたので、現在は青いリボンバーが実際に画像の真中にあります。 pxを定義するのではなく、より良い方法がありますか？

私のコードはhereです。チェックアウトしてください。事前に

おかげで、NonameSL

Answer 1

あなたの中に私は、このファイルを考える行番号26のtest2.htmlファイルを次のように変更します。

div#menu ul li a { 
    background-color: #f8fad4; 
    border-color: #136866; 
    border-radius: 4px 4px 0 0; 
    border-style: solid; 
    color: #555533; 
    font-weight: bold; 
    text-decoration: none; 

    //new changes 
    white-space: nowrap; 
    width: 120px; 
    overflow: hidden; 
    display: inline-block; 
} 

Answer 2

あなたは垂直にしたい場合は、フレキシボックスを使用することができますアイテムも合わせてください。

ペン：http://codepen.io/tomanagle/pen/zBgdAX

<nav> 
<ul> 
    <li>List item 1</li> 
    <li>A quite longer list item</li> 
    <li>An extremely long list item makes the logo un-centered.</li> 
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/English_Pok%C3%A9mon_logo.svg 
    "></li> 
    <li>Shorter</li> 
    <li>List</li> 
    <li>Items</li> 
</ul> 
    </nav> 

はCSS：

nav > ul{ 
    list-style: none; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

nav > ul > li{ 
    float: left; 
    padding: 1rem 2rem; 
    width: 100%; 
    max-width: 12rem; 
} 
nav > ul > li > img{ 
    max-width: 100%; 
} 

Answer 3

最終的に私は非常に似ている、このコードを思い付きました。

width:100px; 
display: inline-block; 

を、リスト項目の数が奇数かどうちょうど小さい側にvisibility: hidden;空の要素を追加します：div#menu ul li aにこれを追加しました。