CSS-Menü - Elemente zentrieren und vertikal ausrichten

Question

Ich habe ein CSS-Menü mit Untermenüs. Ich versuche, die Menüelemente in der Mitte des Menüs anzuzeigen.

Ich versuchte text-align:center zu #menu-product-categories > li { hinzufügen, aber das hat nicht funktioniert.

Ich habe auch margin-top:10px; zu #menu-product-categories > li { hinzugefügt, um den Text der Menüelemente in der Mitte (vertikal) des Menüs zu platzieren, aber wenn der Mauszeiger auf den Elementen ist, zeigt der Hover-Hintergrund nicht die volle Höhe an.

ich eine Geige hier meiner Menü erstellt haben: https://jsfiddle.net/j0x39owh/1/

Answer 1

Versuchen Sie folgendes:

.menu-product-categories-container { 
 
\t display:block; 
 
\t float:left; 
 
\t width:100%; 
 
\t height:60px; 
 
\t background:#F36F25; 
 
} 
 
#menu-product-categories, ul.sub-menu { 
 
\t list-style: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
    
 
    /** here ---------------------------- **/ 
 
    
 
    text-align:center; 
 
    height:100%; 
 
} 
 
#menu-product-categories > li { 
 
    /*display: inline-block; 
 
\t margin-right:0px; 
 
\t position:relative; 
 
\t padding:8px; 
 
\t text-decoration:none; 
 
    margin-top:10px;*/ 
 
    /** here ---------------------------- **/ 
 
    display: inline-block; 
 
    position:relative; 
 
\t padding:21px 8px; 
 
    \t text-decoration:none; 
 
} 
 
#menu-product-categories li > a { 
 
\t color:#FFFFFF; 
 
} 
 
#menu-product-categories > li:hover { 
 
\t background:#FFFFFF; 
 
\t color:#F36F25; 
 
} 
 
#menu-product-categories > li > a:hover { 
 
\t color:inherit; 
 
} 
 
#menu-product-categories ul.sub-menu { 
 
\t display:none; 
 
\t width:200px; 
 
\t position:absolute; 
 
\t z-index:1; 
 
\t left:0; 
 
\t top:40px; 
 
} 
 
#menu-product-categories li:hover ul.sub-menu { 
 
\t display: block; 
 
\t max-height: 200px; 
 
\t background:#F36F25; 
 
} 
 
#menu-product-categories ul.sub-menu li { 
 
\t color:#FFFFFF; 
 
\t float:none; 
 
\t padding:5px; 
 
} 
 
#menu-product-categories ul.sub-menu li:hover { 
 
\t color:#F36F25; 
 
\t background:#000000; 
 
\t float:none; 
 
\t padding:5px; 
 
}

<div class="menu-product-categories-container"><ul id="menu-product-categories" class="menu"><li id="menu-item-2933" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-item menu-item-2933"><a href="/shop/product-category/desk-phones/">Desk Phones</a></li> 
 
    <li id="menu-item-2934" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2934"><a href="/shop/product-category/headsets/">Headsets</a></li> 
 
    <li id="menu-item-2931" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2931"><a href="/shop/product-category/conference-phones/">Conference Phones</a></li> 
 
    <li id="menu-item-2932" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2932"><a href="/shop/product-category/dect-phones/">Dect Phones</a></li> 
 
    <li id="menu-item-2935" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2935"><a href="/shop/product-category/routers/">Routers</a></li> 
 
    <li id="menu-item-2936" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2936"><a href="/shop/product-category/switches/">Switches</a></li> 
 
    <li id="menu-item-2930" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-2930"><a href="/shop/product-category/cctv/">CCTV</a></li> 
 
</ul></div>