水平メニューバー - UL/LI - ボタンホバー

Question

ページには、UL/LIを使用する水平メニューバーがあります。それはブートストラップスキンの中にあります。

私はここでのコード例があります：https://jsfiddle.net/Lsgho7xe/

私が代わりにここにDIVのを使用しようとしました：上記の例（S）と同様にhttps://jsfiddle.net/afh6nox2/

を、あなたは「CNN」ボタンのためにそれを参照してくださいよ、テキストは垂直にセンタリングされません。

以前は、この垂直配置を得るためにテーブル/テーブル - セル表示タイプを使用しましたが、解像度が落ちるとボタンが適切に折り畳まれないため、コードを変更する必要がありました。

このようにして768pxに達すると、ボタンは垂直リストに折りたたまれます。これはモバイルとデスクトップの両方に最適です。しかし、副作用は、テキストがもはや垂直に整列していないということです。

ul.MenuLinks li{ 
    margin:auto 0; 
} 

・ホープ、このことができます：

<ul class="MenuLinks"> 
    <li> 
    <a href="https://www.google.com/culturalinstitute/beta/asset/architecture-tel-aviv-israel/jgHSJFEie5q9HQ" target="_blank">White City of Tel Aviv</a> 
    </li> 
    <li> 
    <a href="http://www.msn.com/en-us/weather/topstories/hottest-arctic-year-on-record-triggers-massive-ice-melt/ar-AAlvEi4?OCID=ansmsnnews11" target="_blank">Arctic Report Card NOAA</a> 
    </li> 
    <li> 
    <a href="http://www.cnn.com" target="_blank">CNN</a> 
    </li> 
    <li> 
    <a href="http://foxnews.com" target="_blank">Fox News</a> 
    </li> 
</ul> 

.MenuLinks { 
    display: flex; 
    justify-content: space-around; 
} 

ul.MenuLinks { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #294273; 
    width: 60%; 
    font-family: roboto; 
    font-variant: small-caps; 
    margin-bottom: 15px; 
    line-height: 24px; 
    -webkit-box-shadow: 0 8px 6px -6px black; 
    -moz-box-shadow: 0 8px 6px -6px black; 
    box-shadow: 0 8px 6px -6px black; 
} 

ul.MenuLinks li { 
    float: left; 
    margin-left: 0; 
    padding: 14px 30px; 
} 

ul.MenuLinks li a { 
    display: block; 
    color: white; 
    text-align: center; 
    text-decoration: none; 
    text-shadow: 1px 1px 2px #000; 
    font-size: 1.2em; 
} 

ul.MenuLinks li:hover:not(.active) { 
    background-color: #c88d0c; 
} 

@media screen and (max-width: 768px) { 
    ul.MenuLinks li { 
    float: none; 
    } 
    .MenuLinks { 
    display: inherit; 
    } 
} 

Answer 1

はCSSとすべてのメニュー項目の下に追加。..あなたの時間と注意をありがとうは垂直モードで中央に整列されます。