IE浏览器下图片和文字如何垂直居中显示？

在IE浏览器中实现图片和文字的垂直居中显示可以通过多种方法实现。以下是几种常见的方法：

方法1：使用Flexbox布局

Flexbox是一种现代的布局方式，可以轻松实现垂直居中。虽然IE11对Flexbox的支持有限，但基本的垂直居中功能是可以使用的。

<div style="display: flex; align-items: center; height: 100px; border: 1px solid #000;">
    <img src="image.jpg" alt="Image" style="width: 50px; height: 50px;">
    <span style="margin-left: 10px;">文字内容</span>
</div>

方法2：使用表格布局

表格布局是一种传统的布局方式，兼容性非常好，适用于所有版本的IE浏览器。

<div style="display: table; height: 100px; border: 1px solid #000;">
    <div style="display: table-cell; vertical-align: middle;">
        <img src="image.jpg" alt="Image" style="width: 50px; height: 50px;">
        <span style="margin-left: 10px;">文字内容</span>
    </div>
</div>

方法3：使用绝对定位和负边距

这种方法适用于已知图片和文字高度的情况。

<div style="position: relative; height: 100px; border: 1px solid #000;">
    <div style="position: absolute; top: 50%; transform: translateY(-50%);">
        <img src="image.jpg" alt="Image" style="width: 50px; height: 50px;">
        <span style="margin-left: 10px;">文字内容</span>
    </div>
</div>

方法4：使用行高（适用于单行文字）

如果文字只有一行，可以通过设置行高来实现垂直居中。

<div style="height: 100px; line-height: 100px; border: 1px solid #000;">
    <img src="image.jpg" alt="Image" style="vertical-align: middle; width: 50px; height: 50px;">
    <span style="margin-left: 10px; vertical-align: middle;">文字内容</span>
</div>

方法5：使用CSS Grid布局

CSS Grid布局是一种强大的布局方式，但在IE浏览器中的支持有限。如果你只需要支持IE11，可以使用以下方法：

<div style="display: grid; align-items: center; height: 100px; border: 1px solid #000;">
    <img src="image.jpg" alt="Image" style="width: 50px; height: 50px;">
    <span style="margin-left: 10px;">文字内容</span>
</div>

总结

• Flexbox：适用于现代浏览器，IE11部分支持。
• 表格布局：兼容性好，适用于所有版本的IE。
• 绝对定位和负边距：适用于已知高度的情况。
• 行高：适用于单行文字。
• CSS Grid：适用于现代浏览器，IE11部分支持。

根据你的需求和对浏览器兼容性的要求，选择合适的方法来实现图片和文字的垂直居中显示。