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

我有一个示例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的解决方案

正如你可能猜到的，鳄鱼黑填充在图片上，我只想添加一些左侧填充和底部填充，使其更加居中

---

任何帮助都会得到感激。谢谢。

您可以尝试修改图像样式以获得所需的结果：

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

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

使用这些值来定位图像，使文本看起来居中。您还可以将“垂直对齐”与“页边距顶部”和“页边距底部”结合使用，以实现更好的控制

---

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

为什么不添加您可以使用CSS选择的边距或填充呢？我本来打算将其作为最坏的情况提到，但忘了。文本位于图像的底部，可能是文本的两倍高……因此看起来有点糟糕。但是，如果这是我唯一的选择，我肯定会增加利润。谢谢另外，我尝试了文本对齐，它似乎没有影响任何东西。。。所以，如果我能让它与保证金一起工作…那将是完全可以接受的。你也可以与负保证金一起工作。很抱歉延迟回复。我的主机提供商正是在那个时候升级网络的。。。不管怎样，这很有效。垂直对齐是我在上面的评论中的意思，它不会影响任何东西，尽管我也尝试了文本对齐和其他一些事情。我想垂直对齐需要显示属性？我需要更好地掌握display属性，因为我刚刚使用inlineflex修复了一个对齐问题，我真的不明白它为什么会工作。我打赌这个解决方案也会解决这个问题。。。非常感谢！垂直对齐是最奇怪的CSS属性之一。如果我没有弄错的话，它只适用于内联块项和表单元格，它们的含义不同。如果你能使用flexbox，那么我建议你改用它，因为它功能更强大。很好，我在这里和那里看到了flexbox代码，但还没有真正掌握底层机制是什么。我一定会查看它以及该链接。再次感谢！