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的情况下格式化文本（＆＃34; Alligator Black＆＃34;）。有许多菜单项，因此文本会根据搜索结果而改变。

我无法轻松修改jquery代码，所以我希望有一个仅限CSS的解决方案？

正如你可能猜到的那样，Alligator Black被挤满了图像，我只是想添加一些左边填充和底部填充以使其更加居中。

任何帮助总是受到赞赏。感谢。

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结合使用，以获得更好的控制权。

当然，如果文本跨越多行，这可能无效。