Tailwind CSS实现行内文字与图片垂直居中的问题排查

我想把文字和图片放在同一行，但图片无法与文字垂直居中对齐。以下是我的代码及效果：

我的代码 #

<div class="w-28 flex justify-center items-center align-middle">
    <div>
        asd
    </div>
    <div>
        <img src="assets/Vector 35.png" class="w-4 align-middle">
    </div>
</div>

效果预览 #

你代码里的align-middle是非Tailwind工具类，且父元素的items-center已经是Tailwind实现垂直居中的正确类，但图片外层额外嵌套的<div>破坏了对齐效果，解决方式如下：

方案一：移除图片外层的div #

直接把图片作为flex容器的子元素，利用父元素的items-center实现垂直居中：

<div class="w-28 flex justify-center items-center">
    <div>asd</div>
    <img src="assets/Vector 35.png" class="w-4">
</div>

方案二：保留外层div并添加对齐类 #

如果必须保留图片外层的div，给该div加上flex items-center，让它内部的图片也能垂直居中：

<div class="w-28 flex justify-center items-center">
    <div>asd</div>
    <div class="flex items-center">
        <img src="assets/Vector 35.png" class="w-4">
    </div>
</div>

同时可以删掉代码里无用的align-middle类，它不属于Tailwind的工具类，对当前布局没有帮助。

内容的提问来源于stack exchange，提问作者rameez khan