图像和字体菜单垂直对齐

Question

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

我目前正在与一位作者合作更新她的网站 (http://www.kerriedroban.com). She would like her flying pig logo next to her menu item "Why Pigs Fly". I was able to find a plugin (https://wordpress.org/plugins/nav-menu-images/)，允许使用菜单中的图像和字体。但是，正如您所看到的那样，图像将 "Why Pigs Fly" 推得比其他菜单项低……我假设是因为它与基线而不是中心对齐。

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

我目前正在使用 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 中附加自定义 class 并将背景图像添加到此 class？

将此添加到您的 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 class 添加到所需的菜单项。

图像和字体菜单垂直对齐

Image and Font Menu Vertical Alignment

html

css

wordpress

vertical-alignment