CSS仅在带有图像和文本的超链接中修改文本

Question

我有一个 jquery 菜单项示例，如下所示:

    <li class="ui-menu-item" role="menuitem">
     <a class="ui-corner-all" tabindex="-1">
        <img src="http://www.example.com/alligator-black_20.jpeg">
        Alligator Black
     </a>
    </li>

我想做的只是在不影响 img 的情况下设置文本格式(“Alligator Black”)。菜单项很多，因此文本会根据搜索结果而变化。

我不能轻易修改 jquery 代码，所以我希望有一个仅 CSS 的解决方案？

正如您可能猜到的那样，鳄鱼皮黑色挤满了图像，我只是想添加一些左侧填充和底部填充以使其居中一点。

我们将不胜感激任何帮助。谢谢。

Answer 1

您可以尝试修改图像样式以达到您想要的效果:

.ui-menu-item img {
    margin-right: 1em; // To space it out

    display: inline-block;
    vertical-align: middle;
}

玩转 vertical-align值以一种使文本看起来居中的方式定位图像。您还可以将 vertical-align 与 margin-top 和 margin-bottom 结合使用，以实现更好的控制。

当然，如果文本跨越多行，这可能不起作用。