html - 图像和字体菜单垂直对齐

Question

虽然我使用 wordpress 已经有一段时间了，但本着完全透明的精神，我在编码方面受到了限制。我不会从头开始构建。我使用主题并尽可能添加自定义。我倾向于尝试和错误并解决问题，但在 2 天后没有结果我想我会发布。

我目前正在与一位作者合作更新她的网站 ( http://www.kerriedroban.com )。她希望在她的菜单项“为什么 pig 会飞”旁边有她的飞 pig 标志。我能够从菜单中的图像和字体中找到一个允许的插件 ( https://wordpress.org/plugins/nav-menu-images/ )。然而，正如您所看到的，图像将“为什么 pig 会飞”推到比其他菜单项更低的位置……我假设是因为它与基线而不是中心对齐。

我认为最简单的答案是缩小图像，但我不想让图像变小，因为它不会被看到。是否有代码可以使它们垂直对齐？

我目前正在使用 AIT Themes 的 Arctica 主题。根据编辑器，它指出我应该对 style.less.css 进行更改。

这是其中包含的菜单信息:

/*** main menu ***/ 
.fixed                      {position:relative;}
#fixedmenu                  {position:fixed; min-width: 1024px; margin-bottom:20px;z-index: 1100;}
#fixedmenu .flags           { position: absolute; top: 18px; right: 30px; padding: 0px; display: block; }
#fixedmenu .flags a         { display: block; float: left; margin-left: 8px; border: 1px solid @linesColor; }
#fixedmenu .flags a.active  { margin-left: 18px; }
#fixedmenu .flags a img     { vertical-align: top; }

.phoneNumber { color: @menusFontColor; margin: 0px; font-size:14px; font-family: @fancyFont;font-weight:normal; }

.mainmenu                               {background: @menuBgColor url("{@menuPattern}")repeat; border-radius: 0 0 7px 7px;  -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px; box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.2);position:relative; }
.mainmenu ul                            { list-style-type: none; margin: 0 30px; }
.mainmenu ul:after                      { content: "."; display: block; height: 0; overflow:hidden; clear: both; visibility: hidden; 
.mainmenu ul li                         { margin: 0px 30px 0px 0px; float: left; position: relative;}
.mainmenu > ul > li,
.mainmenu > .menu > ul > li             { line-height: 26px; display: block; }
.mainmenu > ul > li > a,
.mainmenu > .menu > ul > li > a         { font-family: @fancyFont, Arial, sans-serif; text-decoration: none; color: @menusFontColor; font-size: 16px; padding:12px 0 16px 0; position: relative; z-index: 1000; display: block; }
.mainmenu > ul > li > a:hover,
.mainmenu > .menu > ul > li > a:hover   { text-decoration: none; color: @menusFontColor; }
.mainmenu > ul > li.parent:hover > a,
.mainmenu > .menu ul > li.parent:hover > a                  {  }
.mainmenu > ul > li.current_page_item > a,
.mainmenu > ul > li.current_page_parent > a,`
.mainmenu > ul > li.current_page_ancestor > a,
.mainmenu > .menu > ul > li.current_page_item > a,
.mainmenu > .menu > ul > li.current_page_parent > a,
.mainmenu > .menu > ul > li.current_page_ancestor > a       { color: @menusActiveFontColor !important; }
.mainmenu ul ul                     { width: 200px; padding: 1px 1px 1px 1px; display: none; position: absolute;  top: 45px; left: 0px; margin: 0; background: #fff; border:2px solid #eee;border-top: 12px solid #eee;border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); }
.mainmenu li li                     { width: 200px; height: 25px; float: none; font-size: 13px; line-height: 18px; margin: 0px; padding: 0px 5px 0px 0px; position: relative; }
.mainmenu li li a                   { display: block; padding: 3px 7px 3px 7px; background: none; color: #666666; text-decoration: none; }
.mainmenu li ul > li:hover > a      { background: #eee; color: #000000; text-decoration: none;}
.mainmenu ul ul ul                  { position: absolute; top: -13px; left: 204px; }

如有任何帮助或指导，我们将不胜感激。谢谢!

Answer 1

为什么不在 WordPress 中附加自定义类并将背景图像添加到此类？

---

将此添加到您的 CSS:

.pig:before {
    content: '';
    display: inline-block;
    width: 35px;
    height: 25px;
    background: url('http://kerriedroban.com/wp-content/uploads/2015/08/red-pig-small-e1440441375424.png') no-repeat center bottom;
}
.pig a {
    display: inline-block !important;
}

然后将 pig 类添加到所需的菜单项。