WordPress中的菜单，wp_nav_menu();中心有文字的图像答案

【问题标题】：Menu in WordPress, wp_nav_menu (); images with text on centerWordPress中的菜单，wp_nav_menu();中心有文字的图像
【发布时间】：2015-12-04 00:12:53
【问题描述】：

我正在尝试使用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;
}

【问题讨论】：

我们也需要查看您的标记，而不仅仅是 CSS。

标签： css wordpress image menu

【解决方案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>'
));

【讨论】：