CSS菜单 - 中心对齐项目和中间垂直对齐

Question

我有一个带有子菜单的CSS菜单，我试图让它显示菜单中心的菜单项。

我尝试将text-align:center添加到#menu-product-categories > li {，但这不起作用。

我还将margin-top:10px;添加到#menu-product-categories > li {以将菜单项的文本放在菜单的中间（垂直）但是当悬停在项目上时，悬停背景不会显示完整高度。

我在菜单上创建了一个小提琴：https://jsfiddle.net/j0x39owh/1/

Answer 1

试试这个：

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