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