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>' 
));