WordPress中的菜单，wp_nav_menu（）;图像与中心上的文字

Question

我试图做一个按钮菜单使用wp_nav_menu()，但当我试图定位文字，这有时是三行或两行文字，在背景图像的中间，我不能对齐垂直。当我将鼠标悬停在我想添加的链接上时，它似乎并不想工作。

CSS

.menu { 
    max-width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
} 

.menuButton ul { 
    padding-top: 270px;   
} 

.menuButton ul li { 
    list-style: none; 
    width: 145px; 
    height: 140px; 
    float: left; 
    text-align: center; 
    padding: 1em 1em 1em 1em; 
    margin: 20px 20px 20px 20px; 
    background-repeat:no-repeat; 
    -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.4)); 
} 

.menuButton ul li a { 
    display: block; 
    text-decoration: none; 
    font-family: Open Sans; 
    font-size: 16px; 
    text-align: center; 
    height: 100%; 
    transition:.3s; 
} 

.menuButton ul li:nth-of-type(1) { 
    background: url(kafelki/k_0.svg); 
    background-size: cover; 
} 

.menuButton ul li:nth-of-type(2) { 
    background: url(kafelki/k_1.svg); 
    background-size: cover; 
} 

.menuButton ul li:nth-of-type(3) { 
    background: url(kafelki/k_2.svg); 
    background-size: cover; 
} 

.menuButton ul li:nth-of-type(4) { 
    background: url(kafelki/k_3.svg); 
    background-size: cover; 
} 

.menuButton ul li:nth-of-type(5) { 
    background: url(kafelki/k_4.svg); 
    background-size: cover; 
} 

.menuButton ul li:nth-of-type(6) { 
    background: url(kafelki/k_5.svg); 
    background-size: cover; 
} 

.menuButton ul li:nth-of-type(7) { 
    background: url(kafelki/k_6.svg); 
    background-size: cover; 
} 

.menuButton ul li:nth-of-type(8) { 
    background: url(kafelki/k_7.svg); 
    background-size: cover; 
} 

.menuButton ul li:nth-of-type(9) { 
    background: url(kafelki/k_8.svg); 
    background-size: cover; 
} 

.menuButton ul li:nth-of-type(10) { 
    background: url(kafelki/k_9.svg); 
    background-size: cover; 
} 
.menuButton ul li a:hover { 
    margin-top: 20px; 
} 

Answer 1

可以使用的vertical-align: middle和line-height的组合，以垂直对齐于容器inline-block元件。您只需在链接中添加一个span以便在整个按钮上有链接。

有了这个HTML：

<ul> 
    <li><a href="#"><span>Lorem ipsum dolor sit amet</a></span></li> 
    <li><a href="#"><span>Lorem ipsum</span></a></li> 
    <li><a href="#"><span>Lorem ipsum dolor sit amet lorem ipsum</span></a></li> 
</ul> 

而这个CSS：

li { 
    width: 120px; 
    height: 80px; 
    list-style-type: none; 
    float: left; 
    margin-right: 2px; 
    text-align: center; 
} 
li > a { 
    display: block; 
    vertical-align: middle; 
    background-color: red; 
    color: white; 
    line-height: 80px; 
    height: 100%; 
} 
li > a > span { 
    vertical-align: middle; 
    display: inline-block; 
    line-height: normal; 
    padding: 5px; 
} 

Here is a fiddle说明这一点。

为了增加跨度的你的链接标签内，你可以改变你wp_nav_menu的link_before和link_after参数：

wp_nav_menu(array(
    // ... your current menu parameters ... 
    'link_before' => '<span>', 
    'link_after' => '</span>' 
));